[flutter] Flutter Riverpod에서 메모 게시판 앱 만들기

14 Dec 2023

flutter

Riverpod는 상태 관리와 의존성 관리를 위한 훌륭한 도구입니다. 여기에 Flutter와 함께 사용되면 앱 개발을 쉽고 효율적으로 만들 수 있습니다. 이번 포스트에서는 Flutter Riverpod를 사용하여 간단한 메모 게시판 앱을 만드는 방법에 대해 알아보겠습니다.

필수 패키지 추가하기

우선, pubspec.yaml 파일에 Riverpod 패키지를 추가해야 합니다.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.3

그런 후 패키지를 업데이트합니다.

flutter pub get

Provider 설정하기

Riverpod에서는 Provider를 사용하여 상태를 관리합니다. 먼저, 메모 목록과 선택된 메모 상태를 제공하는 Provider를 설정해야 합니다.

final memoListProvider = StateProvider<List<String>>((ref) => []);
final selectedMemoProvider = StateProvider<String?>((ref) => null);

화면 구성하기

간단한 UI를 가진 화면을 구성합니다.

class MemoScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final memos = watch(memoListProvider);
    final selectedMemo = watch(selectedMemoProvider);
    
    return Scaffold(
      appBar: AppBar(
        title: Text('메모 게시판'),
      ),
      body: ListView.builder(
        itemCount: memos.length,
        itemBuilder: (BuildContext context, int index) {
          final memo = memos[index];
          return ListTile(
            title: Text(memo),
            onTap: () {
              context.read(selectedMemoProvider).state = memo;
            },
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 메모 작성 화면으로 이동
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

메모 작성 화면 구성하기

새로운 메모를 추가할 수 있는 화면을 만듭니다.

class AddMemoScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final newMemoController = TextEditingController();

    return Scaffold(
      appBar: AppBar(
        title: Text('메모 추가'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          TextField(
            controller: newMemoController,
            decoration: InputDecoration(labelText: '메모 입력'),
          ),
          ElevatedButton(
            onPressed: () {
              final memo = newMemoController.text;
              if (memo.isNotEmpty) {
                context.read(memoListProvider).state = [...context.read(memoListProvider).state, memo];
                Navigator.pop(context);
              }
            },
            child: Text('저장'),
          ),
        ],
      ),
    );
  }
}

앱 실행하기

main.dart 파일에서 두 화면을 연결하고 앱을 실행합니다.

void main() {
  runApp(
    ProviderScope(
      child: MaterialApp(
        title: 'Memo Board App',
        home: MemoScreen(),
        routes: {
          '/addMemo': (context) => AddMemoScreen(),
        },
      ),
    ),
  );
}

이제 Flutter Riverpod를 사용하여 메모 게시판 앱을 만드는 방법을 알아보았습니다. Riverpod는 강력한 상태 관리와 의존성 주입을 지원하므로 더 복잡한 앱을 개발할 때도 유용하게 사용될 수 있습니다.

더 많은 내용을 보고 싶다면 Riverpod 공식 문서를 참고하세요!