Flutter 게시판 앱 만들기 — 상태 관리와 SharedPreferences 적용하기

글쓰기 기능까지 완성했으니 이제 작성한 글을 앱에 저장할 차례다.
Flutter에서는 Provider를 이용한 상태 관리와 SharedPreferences를 활용한 간단한 저장 기능을 함께 사용하면 효율적이다.

이번 글에서는 작성된 게시글을 리스트에 반영하고, 앱을 껐다 켜도 유지되는 저장 기능을 구현해보자.

---

🔁 상태 관리: Provider 적용하기

Provider과 SharedPreferences를 사용하기 위해선 pubspec.yaml에 두가지 dependencies를 추가해줘야한다.

dependencies:
  shared_preferences: ^2.0.6
  provider: ^6.1.2

 

Provider를 사용하면 전체 앱에서 게시글 데이터를 공유할 수 있다.

우선 Post 모델을 정의한다:

class Post {
  final String title;
  final String content;

  Post({required this.title, required this.content});

  Map<String, dynamic> toJson() => {
    'title': title,
    'content': content,
  };

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      title: json['title'],
      content: json['content'],
    );
  }
}

이제 Provider 클래스를 생성하자:

class PostProvider extends ChangeNotifier {
  List<Post> _posts = [];

  List<Post> get posts => _posts;

  void addPost(Post post) {
    _posts.add(post);
    notifyListeners();
    savePosts(); // 저장
  }

  void loadPosts(List<Post> posts) {
    _posts = posts;
    notifyListeners();
  }

  void savePosts() async {
    final prefs = await SharedPreferences.getInstance();
    List<String> encoded =
        _posts.map((post) => jsonEncode(post.toJson())).toList();
    prefs.setStringList('posts', encoded);
  }

  Future restorePosts() async {
    final prefs = await SharedPreferences.getInstance();
    List<String>? stored = prefs.getStringList('posts');
    if (stored != null) {
      _posts = stored
          .map((str) => Post.fromJson(jsonDecode(str)))
          .toList();
      notifyListeners();
    }
  }
}

이제 앱 시작 시 restorePosts()를 호출하면 이전에 저장된 게시글을 불러올 수 있다.

---

📱 Provider 연결

앱의 루트에 ChangeNotifierProvider를 등록한다:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final postProvider = PostProvider();
  await postProvider.restorePosts();

  runApp(
    ChangeNotifierProvider(
      create: (_) => postProvider,
      child: MyApp(),
    ),
  );
}

글쓰기 화면에서는 context.read<PostProvider>()를 통해 새 글을 추가한다:

final post = Post(
  title: _titleController.text,
  content: _contentController.text,
);

context.read<PostProvider>().addPost(post);
Navigator.pop(context);

이제 글을 작성하면 게시글 목록에 반영되고, 앱을 껐다 켜도 저장된다.

---

🌱 다음 단계

다음 글에서는 작성된 글을 수정하거나 삭제할 수 있는 기능을 만들어보자.
게시판이라면 꼭 필요한 기능이다!

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 앱 만들기 여정입니다.