Flutter Day 17: 블로그 만들기 - AutoDisposeNotifier 활용 게시글 목록, 상세보기 화면 구현

이번 포스팅에서는 게시글 목록 화면과 상세보기 화면을 만들면서 자동 갱신 기능을 구현해보겠습니다.

📌 게시글 목록 (PostListPage)
- 데이터 로드, 무한 스크롤 & 새로고침 기능, 새로운 게시글 추가 시 자동 갱신
📌 게시글 상세보기 (PostDetailPage)
- 게시글 데이터 표시, 삭제 & 수정 기능, 삭제 시 자동 갱신

기술	설명
Riverpod 상태 관리	NotifierProvider, AutoDisposeNotifier 사용
pull_to_refresh 패키지	무한 스크롤 & 새로고침 기능 구현
Navigator.push()	상세 페이지로 이동 (PostDetailPage)
ref.listen() 활용	게시글 추가/삭제 시 자동으로 목록을 갱신

1. 데이터 모델 정의

게시글과 관련된 데이터를 다루기 위해 User, Post, PostList 모델을 정의합니다.

1.1. 유저 모델 (User)

class User {
  int? id;
  String? username;
  String? imgUrl;

  User.fromMap(Map<String, dynamic> map)
      : id = map["id"],
        username = map["username"],
        imgUrl = map["imgUrl"];
}

User 모델은 JSON 데이터를 받아 객체로 변환 (fromMap).

1.2. 게시글 모델 (Post)

import 'package:intl/intl.dart';
import 'user.dart';

class Post {
  int? id;
  String? title;
  String? content;
  DateTime? createdAt;
  DateTime? updatedAt;
  int? bookmarkCount;
  bool? isBookmark;
  User? user;

  Post.fromMap(Map<String, dynamic> map)
      : id = map["id"],
        title = map["title"],
        content = map["content"],
        createdAt = DateFormat("yyyy-MM-dd").parse(map["createdAt"]),
        updatedAt = DateFormat("yyyy-MM-dd").parse(map["updatedAt"]),
        bookmarkCount = map["bookmarkCount"],
        isBookmark = map["isBookmark"],
        user = User.fromMap(map["user"]);
}

Post 모델은 fromMap을 사용하여 JSON 데이터를 객체로 변환.
DateFormat을 활용하여 날짜 데이터를 변환.

1.3. 게시글 목록 모델 (PostList)

import 'post.dart';

class PostList {
  bool isFirst;
  bool isLast;
  int pageNumber;
  int size;
  int totalPage;
  List<Post> posts;

  PostList({
    required this.isFirst,
    required this.isLast,
    required this.pageNumber,
    required this.size,
    required this.totalPage,
    required this.posts,
  });

  factory PostList.fromMap(Map<String, dynamic> map) {
    return PostList(
      isFirst: map['isFirst'] ?? false,
      isLast: map['isLast'] ?? false,
      pageNumber: map['pageNumber'] ?? 0,
      size: map['size'] ?? 10,
      totalPage: map['totalPage'] ?? 1,
      posts: (map['posts'] as List<dynamic>? ?? [])
          .map((e) => Post.fromMap(e))
          .toList(),
    );
  }
}

PostList 모델은 fromMap을 활용하여 JSON 데이터를 리스트로 변환.

2. 게시글 목록 화면 (PostListPage)

2.1. PostListPage 기본 구조

import 'package:flutter/material.dart';
import 'package:class_f_story/ui/pages/post/list_page/widgets/post_list_body.dart';
import 'package:class_f_story/ui/widgets/custom_drawer.dart';

class PostListPage extends StatelessWidget {
  final scaffoldKey = GlobalKey<ScaffoldState>();

  PostListPage({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        key: scaffoldKey,
        drawer: CustomDrawer(scaffoldKey),
        appBar: AppBar(title: Text('f-story')),
        body: PostListBody(),
      ),
    );
  }
}

Scaffold를 사용하여 기본 화면을 구성.
CustomDrawer 추가 (사이드바 메뉴).
PostListBody()에서 게시글 목록 표시.

2.2. 게시글 목록 뷰 (PostListBody)

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:class_f_story/data/_vm/post_list_view_model.dart';
import 'package:class_f_story/data/model/post_list.dart';
import 'package:class_f_story/ui/pages/post/detail_page/post_detail_page.dart';
import 'package:class_f_story/ui/pages/post/list_page/widgets/post_list_item.dart';

class PostListBody extends ConsumerStatefulWidget {
  const PostListBody({super.key});

  @override
  ConsumerState<PostListBody> createState() => _PostListBodyState();
}

class _PostListBodyState extends ConsumerState<PostListBody> {
  final RefreshController _refreshController = RefreshController();

  @override
  void dispose() {
    _refreshController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    PostList? model = ref.watch(postListProvider);
    PostListViewModel vm = ref.read(postListProvider.notifier);

    if (model == null) {
      return Center(child: CircularProgressIndicator());
    }

    return SmartRefresher(
      controller: _refreshController,
      enablePullUp: true,
      onRefresh: () async {
        await vm.init();
        _refreshController.refreshCompleted();
      },
      onLoading: () async {
        await vm.nextList();
        _refreshController.loadComplete();
      },
      child: ListView.separated(
        itemCount: model.posts.length,
        separatorBuilder: (context, index) => const Divider(),
        itemBuilder: (context, index) => InkWell(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => PostDetailPage(postId: model.posts[index].id!),
              ),
            );
          },
          child: PostListItem(model.posts[index]),
        ),
      ),
    );
  }
}

SmartRefresher를 사용하여 무한 스크롤 & 새로고침 기능 구현.
Navigator.push()를 사용하여 PostDetailPage로 이동.

3. 게시글 상세보기 (PostDetailPage)

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:class_f_story/data/_vm/post_detail_view_model.dart';

class PostDetailPage extends ConsumerWidget {
  final int postId;

  PostDetailPage({required this.postId, super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    PostDetail? postDetail = ref.watch(postDetailProvider(postId));

    if (postDetail == null) {
      return Center(child: CircularProgressIndicator());
    }

    final post = postDetail.post;

    return Scaffold(
      appBar: AppBar(title: Text(post.title ?? '게시글 상세')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(post.content ?? "내용 없음"),
            ElevatedButton(
              onPressed: () => ref.read(postDetailProvider(postId).notifier).deleteById(postId),
              child: Text('삭제하기'),
            ),
          ],
        ),
      ),
    );
  }
}

ref.watch(postDetailProvider)를 사용하여 게시글 데이터 표시.
삭제 버튼 클릭 시 deleteById() 실행.

4. 게시글 목록 자동 갱신 기능 추가

게시글이 추가, 수정, 삭제될 때 목록이 자동으로 갱신되도록 ref.listen()을 활용하여 이벤트를 감지합니다.

4.1. 게시글 이벤트 정의 (PostEventNotifier)

PostAction 이넘(enum)과 이벤트를 관리하는 Notifier를 정의합니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';

enum PostAction {
  none,     // 아무런 이벤트 없음
  created,  // 게시글 생성됨
  updated,  // 게시글 수정됨
  deleted,  // 게시글 삭제됨
}

// 게시글 이벤트를 관리하는 Notifier
class PostEventNotifier extends Notifier<PostAction> {
  @override
  PostAction build() {
    return PostAction.none;  // 초기 상태
  }

  void postCreate() => state = PostAction.created;
  void postUpdated() => state = PostAction.updated;
  void postDeleted() => state = PostAction.deleted;

  // 이벤트 처리 후 상태 초기화 (중복 이벤트 방지)
  void reset() => state = PostAction.none;
}

// 이벤트 프로바이더 생성
final postEventProvider = NotifierProvider<PostEventNotifier, PostAction>(
  () => PostEventNotifier(),
);

PostAction은 게시글 상태 변화를 나타냄 (created, updated, deleted).
PostEventNotifier는 state를 변경하여 이벤트를 발생시킴.
reset()을 사용하여 이벤트 발생 후 상태를 none으로 초기화 (중복 이벤트 방지).

4.2. 게시글 생성 시 이벤트 발생

게시글을 작성하면 postEventProvider의 상태를 created로 변경하여 목록이 자동으로 갱신되도록 합니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:class_f_story/data/repository/post_repository.dart';
import 'package:flutter/material.dart';
import 'package:class_f_story/main.dart';

class PostWriteViewModel
    extends Notifier<(String? title, String? content, bool isWriteCompleted)> {
  final mContext = navigatorkey.currentContext!;
  final PostRepository postRepository = const PostRepository();

  @override
  (String? title, String? content, bool isWriteCompleted) build() {
    return (null, null, false);
  }

  Future<void> createPost({required String title, required String content}) async {
    try {
      final body = {"title": title, "content": content};
      Map<String, dynamic> resBody = await postRepository.save(body);

      if (!resBody['success']) {
        throw Exception('게시글 등록 실패: ${resBody['errorMessage']}');
      }

      // 게시글 작성 완료 메시지
      ScaffoldMessenger.of(mContext)
          .showSnackBar(SnackBar(content: Text('게시글 등록 완료')));

      // 게시글 목록 자동 갱신을 위해 이벤트 발생
      ref.read(postEventProvider.notifier).postCreate();

      state = (null, null, true);
    } catch (e) {
      ScaffoldMessenger.of(mContext)
          .showSnackBar(SnackBar(content: Text('게시글 등록 실패: $e')));
    }
  }
}

// Provider 정의
final postWriteViewModelProvider = NotifierProvider<
    PostWriteViewModel,
    (String? title, String? content, bool isWriteCompleted)>(
  () => PostWriteViewModel(),
);

게시글 작성 후 postEventProvider.notifier.postCreate()를 호출하여 이벤트 발생.
게시글 목록을 구독하는 PostListViewModel이 해당 이벤트를 감지하고 자동으로 갱신.

4.3. 게시글 삭제 시 이벤트 발생

게시글이 삭제되면 postEventProvider의 상태를 deleted로 변경합니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter/material.dart';
import 'package:class_f_story/data/repository/post_repository.dart';
import 'package:class_f_story/main.dart';
import 'package:class_f_story/data/gvm/post_event_notifier.dart';

class PostDetailViewModel extends AutoDisposeFamilyNotifier<PostDetail?, int> {
  final mContext = navigatorkey.currentContext!;
  final PostRepository postRepository = const PostRepository();

  @override
  PostDetail? build(id) {
    ref.onDispose(() {
      debugPrint('PostDetailViewModel 파괴됨');
    });

    init(id);
    return null;
  }

  Future<void> init(int id) async {
    try {
      Map<String, dynamic> responseBody = await postRepository.findById(id: id);

      if (!responseBody['success']) {
        throw Exception('게시글 상세보기 실패');
      }

      state = PostDetail.fromMap(responseBody['response']);
    } catch (e) {
      ScaffoldMessenger.of(mContext)
          .showSnackBar(SnackBar(content: Text('게시글 상세보기 오류: $e')));
    }
  }

  // 게시글 삭제 기능
  Future<void> deleteById(int id) async {
    try {
      Map<String, dynamic> responseBody = await postRepository.delete(id: id);

      if (!responseBody['success']) {
        throw Exception('게시글 삭제 실패: ${responseBody['errorMessage']}');
      }

      // 삭제 이벤트 발생
      ref.read(postEventProvider.notifier).postDeleted();

      // 현재 페이지 종료
      Navigator.pop(mContext);
    } catch (e) {
      ScaffoldMessenger.of(mContext)
          .showSnackBar(SnackBar(content: Text('게시글 삭제 실패: $e')));
    }
  }
}

// Provider 정의
final postDetailProvider = NotifierProvider.autoDispose.family<PostDetailViewModel, PostDetail?, int>(
  () => PostDetailViewModel(),
);

deleteById()에서 postEventProvider.notifier.postDeleted() 호출.
목록 페이지에서 ref.listen()을 사용하여 상태 변화를 감지.

4.4. 게시글 목록에서 ref.listen()으로 이벤트 감지

게시글 목록 페이지에서 게시글이 추가/삭제되었을 때 자동으로 목록을 새로고침하도록 설정합니다.

class PostListViewModel extends AutoDisposeNotifier<PostList?> {
  final refreshController = RefreshController();
  final PostRepository postRepository = const PostRepository();

  @override
  PostList? build() {
    ref.onDispose(() {
      refreshController.dispose();
    });

    // 초기 데이터 로딩
    init();

    // 이벤트 리스너 등록
    ref.listen<PostAction>(
      postEventProvider,
      (previous, next) {
        if (next != PostAction.none) {
          init(); // 목록 새로고침
          ref.read(postEventProvider.notifier).reset(); // 상태 초기화
        }
      },
    );

    return null;
  }

  Future<void> init() async {
    try {
      Map<String, dynamic> resBody = await postRepository.findAll();

      if (!resBody['success']) {
        throw Exception('게시글 목록 로딩 실패');
      }

      state = PostList.fromMap(resBody['response']);
      refreshController.refreshCompleted();
    } catch (e) {
      debugPrint('게시글 목록 로딩 오류: $e');
    }
  }
}

// Provider 정의
final postListProvider = NotifierProvider.autoDispose<PostListViewModel, PostList?>(
  () => PostListViewModel(),
);

ref.listen()을 사용하여 postEventProvider 상태 변화를 감지.
PostAction.created 또는 PostAction.deleted 이벤트 발생 시 init()을 호출하여 목록을 자동으로 새로고침.

5. 정리

✔ 게시글 목록

✔ 무한 스크롤 & 새로고침

✔ 게시글 상세보기

✔ 게시글 삭제 & 자동 목록 갱신

✔ 게시글 작성 후 자동 목록 갱신

이제 게시글이 추가/삭제될 때 목록이 자동으로 업데이트됩니다.

1. 데이터 모델 정의

1.1. 유저 모델 (User)

1.2. 게시글 모델 (Post)

1.3. 게시글 목록 모델 (PostList)

2. 게시글 목록 화면 (PostListPage)

2.1. PostListPage 기본 구조

2.2. 게시글 목록 뷰 (PostListBody)

3. 게시글 상세보기 (PostDetailPage)

4. 게시글 목록 자동 갱신 기능 추가

4.1. 게시글 이벤트 정의 (PostEventNotifier)

4.2. 게시글 생성 시 이벤트 발생

4.3. 게시글 삭제 시 이벤트 발생

4.4. 게시글 목록에서 ref.listen()으로 이벤트 감지

5. 정리

티스토리툴바