[flutter] Flutter Riverpod에서 쪽지 보내기 앱 만들기

14 Dec 2023

flutter

Flutter Riverpod를 사용하여 간단한 쪽지 보내기 앱을 만들어보겠습니다. Riverpod는 Flutter 애플리케이션의 상태 관리를 위한 강력한 라이브러리로, 의존성 주입과 상태 관리를 용이하게 할 수 있습니다.

프로젝트 설정하기

우선, Flutter 프로젝트를 생성합니다. 그리고 pubspec.yaml 파일에 riverpod 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.3

이후 터미널에서 flutter pub get 명령어를 실행하여 패키지를 설치합니다.

Riverpod Provider 작성하기

riverpod를 사용하여 메시지를 보내고받을 messageProvider를 작성합니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';

final messageProvider = StateProvider<String>((ref) => 'Hello, Riverpod!');

위 코드에서 StateProvider를 사용하여 messageProvider를 정의하고 초기값을 설정합니다.

화면 구성하기

이제 UI를 작성합니다. 간단한 텍스트 필드와 버튼으로 구성된 화면을 만들어보겠습니다.

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

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Riverpod 쪽지 보내기'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Consumer(builder:
                  (BuildContext context, ScopedReader watch, Widget? child) {
                final message = watch(messageProvider).state;
                return Text(
                  message,
                  style: TextStyle(fontSize: 24),
                );
              }),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  context.read(messageProvider).state = 'New message!';
                },
                child: Text('새로운 메시지 작성'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드는 riverpod에서 제공하는 Consumer 위젯을 사용하여 messageProvider의 상태를 읽고, 버튼을 눌렀을 때 새로운 메시지를 작성하도록 작성되었습니다.

테스트

앱을 실행하고 버튼을 눌러 메시지의 변경을 확인합니다.

이제 Riverpod를 사용하여 간단한 쪽지 보내기 기능을 가진 Flutter 앱을 만들었습니다.만들었습니다.

참고: Riverpod 공식 문서

이제 새로운 메시지를 보낼 수 있는 간단한 어플리케이션을 만들었습니다. 이제 각 단계를 차근차근 설명하겠습니다. 처음으로 프로젝트를 설정하기 위해 pubspec.yaml 파일에 riverpod 패키지를 추가합니다. 이 패키지는 Riverpod를 사용하여 메시지를 보내고받을 수 있도록 구성됩니다.

그 다음으로는 UI를 작성하였는데, 간단한 텍스트필드와 버튼으로 쪽지를 보내고받을 수 있도록 구현하였습니다.

마지막으로 테스트를 통해 애플리케이션이 의도대로 작동하는지 확인하였습니다.