[051] 플러터 (Flutter) 배우기 - sqflite 사용하여 단어장 만들기(로컬 데이터베이스)

안녕하세요~ totally 개발자입니다.

 

SQFLITE (SQLite)

 

오늘은 SQFLITE(로컬 데이터베이스)를 사용하여 맞춤 영어 단어장을 만들어보도록 하겠습니다. 이것을 사용하면 예전에 알아보았던 SharedPreference 대신에 많은 데이터를 주고 받으며 저장할 수 있는 장점이 있습니다. 오늘 실습을 위해서는 기본적인 데이터베이스의 개념과 SQL의 CRUD 개념을 이해할 필요가 있습니다. 이 CRUD는 Create, Read, Update, Delete의 약자로 SQL에서는 INSERT, SELECT, UPDATE, DELETE 키워드로 쿼리(query) 명령문을 작성하게 됩니다. 바로 실습을 통해 영어 단어장을 만들어보도록 하겠습니다. 모든 소스 코드는 맨 아래에 첨부하였으니 참고하시기 바랍니다.

 

Step 1: pubspec.yaml에 sqflite와 path를 추가해줍니다. flutter pub get 해주시거나 Ctrl(Command) + S로 반영해주시면 됩니다. 

 

 

Step 2: 모델을 위해 word.dart를 생성하여 다음처럼 입력합니다. 1 book 책 이렇게 있을 때 1은 id, book은 name, 책은 meaning이 됩니다.

 

 

 

Step 3: 싱글톤을 기반으로 databaseConfig.dart 파일을 생성하여 DatabaseService 클래스를 작성해줍니다. _internal을 통해 private 생성자를 구현하며 databaseConfig 메소드를 통해 데이터베이스 변수를 초기화해줍니다. 먼저 데이터베이스를 열어준 뒤 21번째 줄처럼 테이블을 생성해주고 id를 Primary Key로 지정합니다. 이 Primary Key는 고유식별값으로 중복을 허용하지 않습니다. 

 

 

 

Step 4: 그 아래 부분에 데이터 삽입을 위한 insert 메소드를 작성합니다.

 

insert 메소드의 parameter로 테이블 이름, 그 다음으로는 테이블에 삽입할 데이터를 map 형태로 변환하여 넣어줍니다.

 

 

Step 5: 그 다음 모든 단어들을 가져오기 위해 selectWords 메소드를 작성합니다. selectWord는 1개의 단어를 가져오고 selectWords는 모든 단어들을 가져오는 메소드이기 때문에 반드시 분리합니다.

 

 

 

Step 6: selectWord 메소드를 입력하여 단어 데이터를 1개만 가져올 수 있도록 만들어줍니다. 

 

63번째 줄에 보시면 where과 whereArgs가 있는데 이 where를 추가하여 어떤 데이터를 가져올 것인지에 대한 조건을 추가해줄 수 있으며 ? 부분은 whereArgs로 지정해주면 됩니다.

 

 

Step 7: 단어 수정을 위해 updateWord 부분 메소드를 작성합니다.

 

 

 

Step 8: 단어 삭제를 위해 deleteWord 부분 메소드를 작성합니다.

 

여기까지 완료하셨다면 databaseConfig.dart 부분은 마무리됩니다.

 

 

Step 9: main.dart에 다음처럼 변수들을 선언합니다. currentCount는 단어 id를 부여하기 위한 목적입니다. 

 

 

 

Step 10: 기본 Scaffold 위젯을 구성해주며 여기에서 45~56번째의 floatingActionButton 통해 단어 추가 버튼을 눌렀을 때 단어를 추가할 수 있는 입력창이 나오게 선언합니다. addWordDialog는 아래에서 선언할 것이기 때문에 아래를 참고하시기 바랍니다. 

 

 

 

Step 11: body 부분을 다음처럼 구성해줍니다. 기존에 FutureBuilder 원리와 동일합니다. 

 

 

 

Step 12: 단어를 보여주는 wordBox 위젯을 작성합니다.

 

 

 

Step 13: updateButton를 만들어줍니다. 이 update를 할 때 기존에 어떤 데이터를 입력했는지 보통 보여주기 때문에 128번째 줄처럼 기존 단어를 가져온 뒤 그 word를 updateWordDialog(word)로 전달해줍니다.

 

 

 

Step 14: deleteButton를 만들어줍니다.

 

 

 

Step 15: 단어 추가를 위한 입력창인 addWordDialog를 다음처럼 만들어줍니다. 184~202번째 줄에 필요한 로직을 참고하시기 바랍니다. 여기 setState가 있는 이유는 _wordList를 다시 업데이트해주어 상태를 다시 반영하기 위함입니다. 

 

 

 

Step 16: updateWordDialog도 입력합니다. 여기에서는 FutureBuilder로 감싸주어야 합니다. 

 

 

 

Step 17: 마지막으로 deleteWordDialog까지 작성하고 마무리해주면 됩니다. 

 

 

 

Step 18: 결과는 아래와 같습니다.

 

 

[전체 소스 코드]

 

[word.dart]

 

 

 

[databaseConfig.dart]

 

 

 

[main.dart]

 

 

[유튜브 강좌 영상]

 

https://youtu.be/kJuAvOON7_A