데이터베이스 활용해 노트 내용 저장하기(Sqflite 패키지)

pub.dev 사이트로 이동합니다.

Sqflite를 검색합니다.

Install 탭으로 이동하면 이 sqflite를 설치할 수 있는 방법이 안내되어 있습니다.

pubspec 파일을 열고, sqflite 버전을 입력후 Pub get을 클릭해 설치를 완료해 주세요.

노트 클래스 수정하기

노트 클래스를 데이터베이스에 맞게 변경해 보도록 하겠습니다. note.dart 파일을 열어주세요. 각 노트를 고유하게 식별할 수 있도록 id 필드를 추가합니다.

노트의 각 정보 (제목, 본문, 색상, ID)를 데이터베이스에 저장할 때 사용할 필드 이름을 정의합니다. 각 노트마다 고유한 ID를 부여하고 관리하도록 합니다. 생성자에도 ID를 넣어줍니다. 다음으로 노트 정보를 저장할 테이블을 지정하도록 하겠습니다.

노트 ID: id
노트 제목: title
노트 본문: body
노트 색상: color

데이터베이스에 노트 정보를 저장하고 불러올 때 사용하는 함수를 추가합니다.

toRow(): 데이터베이스에 저장할 수 있는 형태로 노트 정보를 변환합니다.
fromRow(): 데이터베이스에 저장된 노트 정보를 노트 클래스 형태로 변환합니다.

다음 차시에서는 노트 데이터를 데이터베이스로 관리하게끔 앱을 수정해 보도록 하겠습니다.

NoteManager 클래스 수정하기

notemanater.dart 파일을 열어주세요. 데이터베이스 정보를 저장할 파일 이름과 데이터베이스 버전을 정의합니다.

데이터베이스 버전은 데이터베이스의 구조가 바뀔때마다 1씩 증가시켜 줍니다.

데이터베이스 객체 (Database _database)를 추가합니다.

데이터베이스 객체는 최초 1회 초기화가 필요합니다. 초기화 여부를 확인하기 위해 _getDatabase() 함수를 추가합니다.
최초 실행시 노트 데이터를 저장할 테이블을 생성할 SQL문을 실행해야 합니다. 아래에서 SQL문을 복사하세요.
Future – 함수를 호출한 후 결과를 반환하기까지 시간이 더 걸릴 수 있다는 것을 의미합니다. Future를 통해 결과가 반환되길 기다리는 동안 다른 작업을 실행할 수 있습니다.
데이터베이스는 파일 형태로 정보가 저장되어 있기에, 여기에 저장된 정보를 불러오는데 시간이 조금 더 걸릴 수 있습니다. 따라서 이 작업이 실행되는 동안 다른 작업을 실행할 수 있도록 Future 형태로 값을 반환합니다.

📌 await을 사용하면 Future를 반환하는 함수가 값을 반환할 때 까지 다음 작업을 실행하지 않고 기다릴 수 있습니다.

await을 사용하는 함수는 비동기 함수 (async)로 만들어 주어야 합니다.

final sql = '''
  CREATE TABLE ${Note.tableName} (
    ${Note.columnId} INTEGER PRIMARY KEY AUTOINCREMENT,
    ${Note.columnTitle} TEXT,
    ${Note.columnBody} TEXT NOT NULL,
    ${Note.columnColor} INTEGER NOT NULL
  )
''';

이제 노트데이터를 데이터베이스를 통해 관리하도록 수정해 보도록 하겠습니다.

먼저 addNote() 함수부터 수정하도록 하겠습니다.

화면을 구성하는 페이지를 수정하기

먼저 note.edit 페이지로 이동해 주세요. 이제는 노트 편집페이지를 열 때 index 정보가 아니라 노트ID를 받게 됩니다.

마우스 우클릭 -> Refactor ->rename 선택 후

입력 필드에 id를 쳐서 모두 변경해 주도록 하겠습니다.

다음으로 inistate() 함수도 동일하게 변경해 주도록 할께요. 마우스 우클릭 -> Refactor ->rename 선택 후 noteId로 변경

또 getNote() 함수가 노트 정보를 비동기 방식으로 주고 있으므로 이를 변경해 보도록 하겠습니다. 노트정보를 받았을 때 화면을 갱신하게 끔 수정해 주세요.

다음으로 note.view 페이지를 수정합니다. view 페이지에서도 마찬가지로 index를 id 값으로 수정해야 합니다. 마우스 우클릭 -> Refactor ->rename 선택 후 index를 id로 변경합니다.

다음으로 build 함수를 수정해 보도록 하겠습니다. build() 함수도 비동기방식으로 반환을 하려면 앞서 사용했던 FutureBuilder를 사용하면 됩니다. FutureBuilder를 사용하여 노트 목록 정보를 받은 후에 화면을 구성하게 변경합니다.

FutureBuilder는 노트타입을 반환하도록 설정하고, 받은 데이터에 따라서 화면을 구성하기 위해 builder 필드도 구성해 줍니다.

future에는 노트 목록을 반환하는 함수 (noteManager().listNotes())를 넣어줍니다.
아직 데이터가 준비되지 않은 상태 (snapshot.connectionState == ConnectionState.waiting)일 때에는 프로그레스 바를 대신 표시합니다.
데이터를 받지 못한 경우에는 오류 메시지를 표시해줍니다.

마지막으로 데이터를 받아 왔을 때 보여줄 화면을 구성합니다.

여기에서는 final note = snap.requireData; 라는 필드를 이용해 노트 데이터를 받아올 수 있습니다. 기존에

기존에 화면을 구성하는 코드를 그대로 밑쪽에 붙여 넣어 주면 됩니다.

마지막으로 note.list 페이지를 수정해 보도록 하겠습니다. 마찬가지로 buildcard 함수에서 index는 더이상 사용하지 않으므로 제거해 줍니다.

다음으로 build.cards() 함수를 확인해 보도록 하겠습니다. FutureBuilder를 사용하여 노트 목록 정보를 받은 후에 화면을 구성하게 변경합니다. 따라서 build.cards() 함수는 블록처리된 부분 모두를 삭제합니다.

다음으로 note.view 페이지와 동일하게 FutureBuilde를 사용해서 화면을 구성해 보도록 하겠습니다.

Body속성을 추가해 주구요.

future에는 노트 목록을 반환하는 함수 (noteManager().listNotes())를 넣어줍니다.
아직 데이터가 준비되지 않은 상태 (snapshot.connectionState == ConnectionState.waiting)일 때에는 프로그레스 바를 대신 표시합니다.
데이터를 받지 못한 경우에는 오류 메시지를 표시해줍니다.