728x90
반응형
안녕하세요 이번글에서는 이전글에서 만들어둔 CRUD 메서드들을 사용하여 보겠습니다.
내용을 모르시는 분들은 이전글을 참고해 주세요
https://itmoon.tistory.com/104
https://itmoon.tistory.com/105
home_screen.dart
import 'package:database/screen/member_list.dart';
import 'package:drift/drift.dart' as val;
import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';
import '../database/drift_database.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
DateTime now = new DateTime.now();
String? name;
final GlobalKey<FormState> formKey = GlobalKey(); // form 에서 사용할 키생성
List<MemberData> memberList = [];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: MediaQuery.of(context).size.width,
child: Form( // 입력값을 저장하기 위한 form 생성
key: formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
renderTextFormField( //텍스트 필드 생성
onSaved: (val) { // 텍스트 필드의 값을 미리 선언해둔 변수에 저장
if (val != null) {
name = val;
}
},
),
ElevatedButton(
onPressed: () async {
formKey.currentState!.save(); // 폼 안에 있는 값들을 저장
await GetIt.I<LocalDatabase>().createMember( // 미리 만들어둔 member 저장 메소드로 데이터 저장
MemberCompanion(
name: val.Value(name!),
date: val.Value(new DateTime(now.year,now.month,now.day))));
memberList = await GetIt.I<LocalDatabase>().getMembers(); // 저장된 member 호출
Navigator.of(context).push( // memberList 화면으로 넘겨준다.
MaterialPageRoute(builder: (BuildContext context) {
return MemberList(memberList: memberList);
}));
},
child: Text('저장'))
],
),
),
),
),
);
}
renderTextFormField({
required FormFieldSetter onSaved,
}) {
assert(onSaved != null);
return Column(
children: [
Row(
children: [
Text(
'이름',
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w700,
),
),
],
),
TextFormField(
onSaved: onSaved,
),
],
);
}
}
member_list.dart
import 'package:database/database/drift_database.dart';
import 'package:database/model/member.dart';
import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';
class MemberList extends StatefulWidget {
final List<MemberData> memberList;
const MemberList( {Key? key, required this.memberList}) : super(key: key);
@override
State<MemberList> createState() => _MemberListState();
}
class _MemberListState extends State<MemberList> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: MediaQuery.of(context).size.width,
child: ListView.separated( // 넘겨받은 memberList 값을 리스트뷰를 사용하여 출력
itemBuilder: (context, index) {
MemberData m = widget.memberList[index];
return Text('id : ${m.id} , name : ${m.name} , date : ${m.date.year} - ${m.date.month} - ${m.date.day}');
}
,separatorBuilder: (context, index) {
return SizedBox(
height: 8.0,
);
}, itemCount: widget.memberList.length)
),
),
);
}
}
위 코드처럼 작성한 다음 실행시켜 봅시다.
화면처럼 텍스트필드 하나를 확인할 수 있습니다.
이제 이름을 입력하고 저장버튼을 누르면
id 값은 자동생성으로 설정하였기 때문에 입력하지 않아도 생성된 것을 확인할 수 있습니다.
앱을 삭제하지 않는 한 다시 껐다 켜도 해당값은 삭제되지 않고 호출되는 것을 확인할 수 있습니다.
다음글에서는 삭제와 수정을 알아보도록 하겠습니다.
728x90
반응형
'Flutter' 카테고리의 다른 글
[ Flutter ] Admob(애드몹) 광고달기 (0) | 2023.01.29 |
---|---|
[ Flutter ] Cannot fit requested classes in a single dex file (# methods: 68653 > 65536) 에서 해결하기 (0) | 2023.01.29 |
[ Flutter ] sqlite & drift 사용하기 - 2편 (0) | 2022.12.18 |
[ Flutter ] sqlite & drift 사용하기 -1편 (0) | 2022.12.04 |
[ Flutter ] 배경 데코레이션 & 이미지 터치 만들기 (0) | 2022.11.06 |