메모 고정 핀 기능 — 자주 쓰는 메모는 상단 고정

메모가 많아질수록 중요한 메모가 아래로 밀려나는 문제가 생긴다.
이를 해결하는 가장 간단하고 효과적인 방법은 바로 “핀 고정 기능”이다.

이번 글에서는 Flutter로 메모를 상단에 고정시키는 ‘핀’ 기능을 구현하고,
고정된 메모는 위에, 일반 메모는 아래로 정렬해서 보여주는 구조를 만들자.

---

📌 메모 모델에 isPinned 필드 추가

class Memo {
  final int? id;
  final String content;
  final bool isPinned;

  Memo({this.id, required this.content, this.isPinned = false});

  Map<String, dynamic> toMap() {
    return {
      'id': id,
      'content': content,
      'isPinned': isPinned ? 1 : 0,
    };
  }

  factory Memo.fromMap(Map<String, dynamic> map) {
    return Memo(
      id: map['id'],
      content: map['content'],
      isPinned: map['isPinned'] == 1,
    );
  }
}

핀 상태는 DB에 저장할 수 있도록 int 형태로 변환해준다 (0/1).

---

🗃️ DB 구조 변경

기존 테이블 생성 코드를 수정하여 isPinned 필드를 추가한다.

// 테이블 생성 코드
CREATE TABLE memos (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  content TEXT,
  isPinned INTEGER
)

이미 앱에 DB가 생성된 경우 migration이 필요하거나 앱을 재설치해 테스트 가능.

---

📍 핀 기능 토글 버튼 만들기

IconButton(
  icon: Icon(
    memo.isPinned ? Icons.push_pin : Icons.push_pin_outlined,
    color: memo.isPinned ? Colors.orange : Colors.grey,
  ),
  onPressed: () async {
    final updated = Memo(
      id: memo.id,
      content: memo.content,
      isPinned: !memo.isPinned,
    );
    await MemoDatabase.updateMemo(updated);
    _loadMemos(); // 새로고침
  },
)

단순히 isPinned 상태를 토글하고 DB에 반영한 뒤 다시 리스트를 불러온다.

---

🔼 고정 메모 상단 정렬

Future<List<Memo>> fetchMemos() async {
  final db = await database;
  final result = await db.query(
    'memos',
    orderBy: 'isPinned DESC, id DESC', // 고정된 메모 먼저
  );
  return result.map((e) => Memo.fromMap(e)).toList();
}

SQL의 ORDER BY를 이용해 고정된 메모를 먼저 보여주도록 정렬한다.

---

📱 전체 UI 흐름 요약

• 메모 모델에 isPinned 추가
• UI에 핀 아이콘 버튼 배치
• 토글 → update → setState()
• DB에서 ORDER BY isPinned로 정렬

---

🧘 마무리하며

작은 기능이지만, 메모 앱의 사용성을 크게 바꾸는 요소가 바로 이 핀 기능이다.
중