플러터(Flutter) SQLite 를 활용한 메모장 구현 -1

소개

 

SQLite 와 연동하여 메모장을 구현하는 것을 알아보겠습니다.

 

 

 

참고

 

참고한 링크들입니다.

SQLite에 데이터 저장하기

sqflite | Flutter Package

 

패키지

• sqflite: SQLite 데이터베이스를 사용할 수 있도록 지원

• path: 디스크에 저장할 데이터베이스의 경로와 관련된 기능을 지원

 

해당 패키지를 추가합니다.

 

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  path: ^1.6.4
  sqflite: ^1.3.0

 

 

코드

 

데이터베이스에 저장되는 메모 속성정보를 가지는 클래스입니다.

아래 MemoProvider 클래스와 같은 파일에 있습니다.

class Memo {
  int id;
  String title;
  String content;

  Memo({this.id, this.title, this.content});

  Map<String, dynamic> toMap() {
    var map = <String, dynamic>{
      columnTitle: title,
      columnContent: content,
    };
    if (id != null) {
      map[columnId] = id;
    }
    return map;
  }

  Memo.fromMap(Map<String, dynamic> map) {
    id = map[columnId];
    title = map[columnTitle];
    content = map[columnContent];
    print('$id, $title, $content');
  }
}

 

DB 를 조작하는 클래스입니다. 

해당 클래스로 인스턴스가 생성될 때 데이터베이스 경로에 파일을 확인한 후, 열어주는 역할을 합니다.

모바일 어플리케이션은 경로에 대해서 조금 까다롭다는 생각이 듭니다.

import 'dart:async';
import 'package:path/path.dart';
import 'package:sqflite/sqflite.dart';

final String tableName = 'memo';
final String columnId = 'id';
final String columnTitle = 'title';
final String columnContent = 'content';

class MemoProvider {
  static Database _database;

  Future<Database> get database async {
    if(_database != null) return _database;

    _database = await initDB();
    return _database;
  }

  initDB() async {
    String path = join(await getDatabasesPath(), 'memo.db');

    return await openDatabase(
      path,
      version: 1,
      onCreate: (db, version) async {
        await db.execute('''
          CREATE TABLE $tableName(
            $columnId integer primary key autoincrement, 
            $columnTitle text not null,
            $columnContent text not null
          )
        ''');
      },
      onUpgrade: (db, oldVersion, newVersion){}
    );
  }
  
  Future<Memo> insert(Memo memo) async {
    final db = await database;
    print(memo.toMap());
    memo.id = await db.insert(tableName, memo.toMap());
    return memo;
  }
}

 

글쓰는 페이지의 코드입니다.

위의 클래스를 가지는 sql_helper.dart 를 import 해서 사용합니다.

import 'package:flutter/material.dart';
import 'package:myblog/memo/sql_helper.dart';

class WritePage extends StatelessWidget {

  final title = TextEditingController();
  final content = TextEditingController();

  // ignore: non_constant_identifier_names
  Future<void> _insertDB() async {
    var provider = MemoProvider();
    var memo = Memo(title: title.text, content: content.text);
    provider.insert(memo);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Insert'), 
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: Column(
            children: <Widget>[
              TextField(
                controller: title,
                decoration: InputDecoration(
                  labelText: '제목을 입력하세요'
                ),
              ),
              TextField(
                controller: content,
                decoration: InputDecoration(
                  labelText: '내용을 입력하세요',
                  isDense: true
                ),
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _insertDB();
          Navigator.pop(context);
        },
        child: Icon(Icons.add)
      ),
    );
  }
}

 

더하기 아이콘을 눌렀을 때, MemoProvider 클래스에서 정의한 insert 메서드를 통해 Memo 인스턴스의 속성정보가 DB로 삽입됩니다.

Future<void> _insertDB() async {
  var provider = MemoProvider();
  var memo = Memo(title: title.text, content: content.text);
  provider.insert(memo);
}

 

 

 

참고사항

 

SQLite 연동은 경로 등의 문제로 DB 를 불러오는게 까다롭다고 생각이 드는데요.

위에 DB Open 하는 것과 Query 부분 참고하시면 될 것 같습니다.

 

 

아래 링크에서 해당 코드를 수정해서 사용했습니다.

sqflite | Flutter Package