[Flutter] (MVVM 활용) 게시글 생성 화면의 뷰 모델(PosCreateViewModel) 만들어 보자

게시글 생성 화면
lib/view/post/post_create_page

import 'package:flutter/material.dart';


class PostCreatePage extends StatefulWidget {
  const PostCreatePage({super.key});

  @override
  State<PostCreatePage> createState() => _PostCreatePageState();
}

class _PostCreatePageState extends State<PostCreatePage> {
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

 

ConsumerStatefulWidget 활용

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';


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

  @override
  ConsumerState<PostCreatePage> createState() => _PostCreatePageState();
}

class _PostCreatePageState extends ConsumerState<PostCreatePage> {
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

 

1. ConsumerWidget vs ConsumerStatefulWidget

• ConsumerWidget은 기본적으로 불변 상태의 위젯에서 사용되며, 해당 위젯이 리버팟 Provider로부터 상태를 구독하여 반응형 업데이트를 할 때 사용됩니다.
• ConsumerStatefulWidget은 상태가 변하는 동적 화면을 다룰 때 사용됩니다. 즉, 사용자가 폼을 작성하는 동안 입력값이 계속 변하는 상태(예: 텍스트 필드의 입력 값, 폼의 유효성 검사 등)를 처리할 수 있어야 하기 때문에 상태가 변하는 위젯을 다룰 수 있는 StatefulWidget의 기능이 필요합니다.

2. 폼 관련 작업에서의 상태 관리

게시글 생성 페이지는 다음과 같은 상황에서 상태 관리가 필요할 수 있습니다:

• 사용자가 제목이나 본문을 입력하면서 폼의 값이 계속해서 변함.
• 입력 중 오류가 발생하거나 입력이 유효하지 않은 경우 에러 메시지를 사용자에게 보여줄 필요가 있음.
• 사용자가 입력을 마치고 게시글을 제출했을 때, 로딩 상태나 성공/실패 상태를 보여줄 필요가 있음.

이러한 상황에서는 상태의 지속적인 변화가 필요하므로, StatefulWidget을 사용하고 여기에 Riverpod의 상태 관리 기능을 추가하기 위해 ConsumerStatefulWidget을 사용하는 것이 적합합니다.

 

+ 버튼 클릭하면 create 화면으로 이동