Flutter

[ Flutter ] sqlite & drift 사용하기 - 3편

사과씨앗 2022. 12. 21. 21:17
728x90
반응형

안녕하세요 이번글에서는 이전글에서 만들어둔 CRUD 메서드들을 사용하여 보겠습니다.

 

내용을 모르시는 분들은 이전글을 참고해 주세요 

 

https://itmoon.tistory.com/104

 

[ Flutter ] sqlite & drift 사용하기 -1편

안녕하세요 이번 글에서는 데이터를 핸드폰에 저장하기 위한 sqlite를 사용해 보겠습니다. 프로젝트 구조 pubspec.yaml dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. #

itmoon.tistory.com

 

 

https://itmoon.tistory.com/105

 

[ Flutter ] sqlite & drift 사용하기 - 2편

이번 글에서는 지난 글에 이어서 drift를 사용하여 CRUD 하는 방법을 알아보도록 하겠습니다. 이전 글을 못 보신 분들은 아래 링크를 참고해 주세요 https://itmoon.tistory.com/104 [ Flutter ] sqlite & drift 사

itmoon.tistory.com

 

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
반응형