로컬 DB로 저장하기 — sqflite를 활용한 오프라인 저장소

2025. 5. 28. 15:34·Flutter/Flutter 메모 앱 만들기
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
'Flutter/Flutter 메모 앱 만들기' 카테고리의 다른 글
  • 메모 태그 분류 — 주제별로 필터링하는 법
  • 메모 고정 핀 기능 — 자주 쓰는 메모는 상단 고정
  • 메모 CRUD 기능 구현 — 추가, 수정, 삭제 기본기 익히기
  • 심플한 메모 UI 구성 — 감성적인 디자인으로 시작하기
코드를 걷는 사람
코드를 걷는 사람
devwanderer 님의 블로그 입니다.
  • 코드를 걷는 사람
    터미널 밖으로 나온 개발자
    코드를 걷는 사람
  • 전체
    오늘
    어제
    • 분류 전체보기
      • Flutter
        • Flutter 게시판 앱 만들기
        • Flutter 뉴스 앱 만들기
        • Flutter 메모 앱 만들기
        • Flutter 캘린더 앱 만들기
        • Flutter 날씨 앱 만들기
      • Next.js
      • Ruby On Rails
  • 블로그 메뉴

    • 홈
    • 태그
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    다크모드
    메모앱
    table_calendar
    RubyOnRails
    북마크기능
    flutterui
    ActiveRecord
    UI디자인
    Firebase
    모바일앱개발
    날씨앱
    코드를걷는사람
    백엔드개발
    감성앱
    flutter상태관리
    UIUX
    flutter앱개발
    flutter기초
    flutter디자인
    flutter게시판
    openweather
    Nextjs
    정적사이트
    뉴스앱
    Flutter
    rails보안
    fluttertips
    캘린더앱
    개발블로그
    flutter개발
  • 최근 댓글

  • 최근 글

  • 반응형
    250x250
  • hELLO· Designed By정상우.v4.10.3
코드를 걷는 사람
로컬 DB로 저장하기 — sqflite를 활용한 오프라인 저장소
상단으로

티스토리툴바