[flutter] 플러터 Riverpod를 사용하여 앱에 모달 대화 상자 기능을 추가하는 방법은 어떻게 되나요?

04 Dec 2023

flutter

앱 개발 중에 사용자와의 상호작용을 위해 모달 대화 상자를 사용하는 경우가 많습니다. Flutter Riverpod는 플러터의 상태 관리 도구 중 하나로, 앱의 상태를 관리하고 상태 변화에 따라 UI를 업데이트할 수 있도록 도와줍니다. 이번 글에서는 Riverpod를 사용하여 앱에 모달 대화 상자 기능을 추가하는 방법을 알아보겠습니다.

Riverpod 프로바이더 생성하기

먼저 Riverpod를 사용하여 앱에 상태 값을 관리하는 프로바이더를 생성합니다. 프로바이더는 상태 값을 제공하고 업데이트하는데 사용됩니다. 다음 코드를 참고하여 프로바이더를 생성해보세요.

import 'package:flutter_riverpod/flutter_riverpod.dart';

final dialogProvider = Provider<DialogState>((ref) => DialogState());

class DialogState {
  bool isOpen = false;

  void openDialog() {
    isOpen = true;
  }

  void closeDialog() {
    isOpen = false;
  }
}

위 코드에서 DialogState 클래스는 모달 대화 상자의 열림/닫힘 상태를 관리하기 위해 사용됩니다. openDialog와 closeDialog 메서드는 상태 값을 업데이트합니다.

모달 대화 상자 위젯 만들기

다음으로 모달 대화 상자를 위한 위젯을 생성합니다. 이 위젯은 생성된 프로바이더 값을 사용하여 모달 대화 상자를 열거나 닫을 수 있습니다. 다음 코드를 참고하여 모달 대화 상자 위젯을 만들어보세요.

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

class CustomDialog extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final dialogState = watch(dialogProvider);

    return dialogState.isOpen
        ? AlertDialog(
            title: Text('Modal Dialog'),
            content: Text('This is a modal dialog.'),
            actions: [
              TextButton(
                onPressed: dialogState.closeDialog,
                child: Text('Close'),
              ),
            ],
          )
        : SizedBox();
  }
}

위 코드에서 CustomDialog 클래스는 ConsumerWidget을 상속받아 모달 대화 상자를 표시하기 위한 위젯을 생성합니다. watch 함수를 이용하여 프로바이더 값을 읽어와서 모달 대화 상자를 열고 닫을 수 있습니다. 열림 상태일 경우 AlertDialog 위젯을 표시하고, 닫힘 상태일 경우 SizedBox 위젯을 반환합니다.

모달 대화 상자 위젯 사용하기

모달 대화 상자 위젯을 사용하기 위해 스크린 위젯에서 CustomDialog 위젯을 호출하면 됩니다. 다음 코드를 참고하여 모달 대화 상자를 사용하는 스크린 위젯을 만들어보세요.

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Modal Dialog Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (_) => CustomDialog(),
            );
          },
          child: Text('Open Modal Dialog'),
        ),
      ),
    );
  }
}

위 코드에서 HomeScreen 클래스는 앱의 홈 화면을 위한 위젯을 생성합니다. ElevatedButton 위젯을 누르면 showDialog 함수를 호출하여 모달 대화 상자를 열 수 있도록 구현되어 있습니다.

앱 실행하기

위에서 구현한 코드를 실행하여 앱을 실행해보세요. Open Modal Dialog 버튼을 누르면 모달 대화 상자가 표시되는 것을 확인할 수 있습니다.

이처럼 Flutter Riverpod를 사용하여 앱에 모달 대화 상자 기능을 추가할 수 있습니다. Riverpod를 사용하면 상태 관리가 간편해지고 앱의 확장성과 유지보수성도 향상됩니다. Riverpod에 대해 더 알아보려면 공식 문서를 참고하세요.

Riverpod 프로바이더 생성하기

모달 대화 상자 위젯 만들기

모달 대화 상자 위젯 사용하기

앱 실행하기

참고 자료