Flutter 게시판 앱 만들기 — 게시글 수정 & 삭제 기능 추가하기

게시판의 기본은 ‘쓰기’지만, 그 다음은?
바로 수정과 삭제다.
이번 글에서는 작성된 게시글을 앱 내에서 수정하거나 삭제하는 기능을 구현해보자.

---

✏️ 수정 기능 구현

수정을 위해선 기존 글의 데이터를 TextEditingController에 불러오고,
사용자가 수정한 내용을 저장하면 된다.

PostProvider에 수정 메서드를 추가하자:

void updatePost(int index, Post updatedPost) {
  _posts[index] = updatedPost;
  notifyListeners();
  savePosts();
}

이제 EditPostScreen에서 다음과 같이 활용한다:

class EditPostScreen extends StatefulWidget {
  final int index;
  final Post post;

  const EditPostScreen({required this.index, required this.post, super.key});

  @override
  State<EditPostScreen> createState() => _EditPostScreenState();
}

class _EditPostScreenState extends State<EditPostScreen> {
  late TextEditingController _titleController;
  late TextEditingController _contentController;

  @override
  void initState() {
    super.initState();
    _titleController = TextEditingController(text: widget.post.title);
    _contentController = TextEditingController(text: widget.post.content);
  }

  void _submitEdit() {
    final updatedPost = Post(
      title: _titleController.text,
      content: _contentController.text,
    );

    context.read<PostProvider>().updatePost(widget.index, updatedPost);
    Navigator.pop(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('글 수정')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(controller: _titleController),
            SizedBox(height: 8),
            TextField(controller: _contentController, maxLines: 5),
            SizedBox(height: 20),
            ElevatedButton(onPressed: _submitEdit, child: Text('수정하기'))
          ],
        ),
      ),
    );
  }
}

---

🗑️ 삭제 기능 구현

삭제는 리스트에서 해당 인덱스를 제거하면 된다.

PostProvider에 deletePost() 추가:

void deletePost(int index) {
  _posts.removeAt(index);
  notifyListeners();
  savePosts();
}

글 상세보기 화면이나 리스트에서 다음과 같이 호출:

IconButton(
  icon: Icon(Icons.delete),
  onPressed: () {
    context.read<PostProvider>().deletePost(index);
    Navigator.pop(context);
  },
)

삭제 후에는 자동으로 리스트에 반영되며, 저장된 데이터도 갱신된다.

---

📌 UI 팁

• 수정 버튼은 상세보기 화면에 AppBar action으로
• 삭제 버튼은 IconButton으로 오른쪽 상단에 배치
• 삭제 시 AlertDialog로 한 번 확인받으면 UX가 좋아짐

---

🌱 다음 단계

이제 게시판 앱의 기본 기능은 모두 갖췄다.
다음 글에서는 전체 UI를 감성 있게 다듬고, 앱 완성도를 높이는 마무리 작업을 해보자.

Flutter 게시판 앱, 진짜 게시판처럼 완성되어 가고 있다.

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