[flutter] 플러터 프로바이더를 사용하여 게시물 작성하기

22 Dec 2023

flutter

플러터 앱에서 데이터를 관리하다 보면 데이터의 상태 변화를 다른 화면과 공유해야 하는 경우가 있습니다. 이때 플러터 프로바이더를 사용하면 간단하게 상태 관리를 할 수 있습니다. 이번 포스트에서는 플러터 프로바이더를 사용하여 게시물 작성 화면을 구현하는 방법에 대해 알아보겠습니다.

1. 프로바이더 생성하기

먼저 ChangeNotifier를 상속받는 클래스를 생성하여 포스트 데이터와 관련된 로직을 구현합니다.

import 'package:flutter/material.dart';

class PostProvider with ChangeNotifier {
  String _title = '';
  String _content = '';

  String get title => _title;
  String get content => _content;

  void setTitle(String newTitle) {
    _title = newTitle;
    notifyListeners();
  }

  void setContent(String newContent) {
    _content = newContent;
    notifyListeners();
  }
}

위 코드에서 setTitle과 setContent 메서드는 포스트의 제목과 내용을 설정하고, notifyListeners를 호출하여 프로바이더의 구독자들에게 상태 변경을 알립니다.

2. 프로바이더 제공하기

이제 앱의 루트 위젯에서 PostProvider를 제공하여 앱 전반에서 프로바이더에 접근할 수 있도록 만들어야 합니다.

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => PostProvider(),
      child: MyApp(),
    ),
  );
}

이렇게 하면 프로바이더를 전역적으로 사용할 수 있게 됩니다.

3. UI에 프로바이더 연결하기

이제 게시물 작성 화면에 포스트 프로바이더를 연결하여 상태를 관리할 수 있습니다.

class PostScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final postProvider = Provider.of<PostProvider>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('게시물 작성'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              onChanged: (text) {
                postProvider.setTitle(text);
              },
              decoration: InputDecoration(labelText: '제목'),
            ),
            SizedBox(height: 20),
            TextField(
              onChanged: (text) {
                postProvider.setContent(text);
              },
              decoration: InputDecoration(labelText: '내용'),
              maxLines: 5,
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서 Provider.of<PostProvider>(context)로 포스트 프로바이더에 접근하여 제목과 내용을 변경할 수 있습니다.

이제 플러터 프로바이더를 사용하여 게시물 작성 화면을 구현하는 방법을 알아보았습니다. 프로바이더를 사용하면 복잡한 상태 관리 로직을 간단하게 처리할 수 있어서 개발 생산성을 높일 수 있습니다.

참고 자료

Provider 패키지 문서