728x90
반응형
지금까지 만든 메모 앱은 앱을 종료하면 모든 데이터가 사라진다.
진짜 앱답게 만들려면, 로컬 저장소가 필요하다.
이번 글에서는 Flutter에서 sqflite를 이용해 메모를 DB에 저장하고,
앱을 껐다 켜도 메모가 유지되도록 구현해보자.
💾 sqflite란?
sqflite는 Flutter에서 가장 널리 사용되는 SQLite 기반의 DB 플러그인이다.
파일 기반으로 앱 내부에 데이터를 안전하게 저장할 수 있다.
📦 패키지 설치
// pubspec.yaml
dependencies:
sqflite: ^2.3.2
path: ^1.9.0
sqflite
는 DB, path
는 로컬 경로를 잡아주는 역할이다.
🧱 메모 테이블 구조 정의
class Memo {
final int? id;
final String content;
Memo({this.id, required this.content});
Map<String, dynamic> toMap() {
return {'id': id, 'content': content};
}
factory Memo.fromMap(Map<String, dynamic> map) {
return Memo(id: map['id'], content: map['content']);
}
}
기본적으로 id
와 content
필드를 갖는 단순한 테이블로 구성한다.
🗃️ DB 초기화 및 CRUD 함수
class MemoDatabase {
static Database? _db;
static Future<Database> get database async {
if (_db != null) return _db!;
_db = await _initDB();
return _db!;
}
static Future<Database> _initDB() async {
final dbPath = await getDatabasesPath();
final path = join(dbPath, 'memo.db');
return openDatabase(
path,
version: 1,
onCreate: (db, version) {
return db.execute(
'CREATE TABLE memos (id INTEGER PRIMARY KEY AUTOINCREMENT, content TEXT)',
);
},
);
}
static Future<int> insertMemo(Memo memo) async {
final db = await database;
return db.insert('memos', memo.toMap());
}
static Future<List<Memo>> fetchMemos() async {
final db = await database;
final result = await db.query('memos');
return result.map((map) => Memo.fromMap(map)).toList();
}
static Future<void> deleteMemo(int id) async {
final db = await database;
await db.delete('memos', where: 'id = ?', whereArgs: [id]);
}
}
DB 열기 → insert / select / delete 함수만 구현해두면 이후 로직에서 간편하게 재사용할 수 있다.
📱 UI에 DB 연동하기
class MemoHomeScreen extends StatefulWidget {
@override
_MemoHomeScreenState createState() => _MemoHomeScreenState();
}
class _MemoHomeScreenState extends State<MemoHomeScreen> {
List<Memo> _memos = [];
@override
void initState() {
super.initState();
_loadMemos();
}
Future<void> _loadMemos() async {
final memos = await MemoDatabase.fetchMemos();
setState(() {
_memos = memos;
});
}
void _addMemo(String content) async {
await MemoDatabase.insertMemo(Memo(content: content));
_loadMemos();
}
void _deleteMemo(int id) async {
await MemoDatabase.deleteMemo(id);
_loadMemos();
}
이제 앱을 껐다 켜도 메모가 사라지지 않고, 실시간으로 DB와 동기화된다.
📌 실전 팁
- 데이터 정렬: created_at 필드 추가 + ORDER BY로 정렬
- 수정 기능:
UPDATE
쿼리로 메모 수정 가능 - 삭제 전 확인: Dismissible에 confirm dialog 추가
🧘 마무리하며
이제 당신의 메모 앱은 진짜 “앱”이 되었다.
Flutter의 UI 위에 SQLite 기반의 영속성이 더해지면,
사용자가 믿고 기록할 수 있는 도구가 완성된다.
기억을 저장하는 앱, Flutter로 시작하자.
✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 메모 앱 만들기 여정입니다.
728x90
반응형
'Flutter > Flutter 메모 앱 만들기' 카테고리의 다른 글
다크 모드와 배경 커스터마이징 — 메모에 감성 더하기 (0) | 2025.05.28 |
---|---|
메모 태그 분류 — 주제별로 필터링하는 법 (4) | 2025.05.28 |
메모 고정 핀 기능 — 자주 쓰는 메모는 상단 고정 (0) | 2025.05.28 |
메모 CRUD 기능 구현 — 추가, 수정, 삭제 기본기 익히기 (0) | 2025.05.28 |
심플한 메모 UI 구성 — 감성적인 디자인으로 시작하기 (0) | 2025.05.28 |