[flutter] get_it를 사용하여 플러터 앱에서 다이얼로그와 알림을 어떻게 처리하는가?

30 Nov 2023

flutter

소개

플러터(Flutter) 앱에서 다이얼로그와 알림을 효율적으로 처리하기 위해 get_it 패키지를 사용하는 방법을 알아보겠습니다. get_it은 의존성 관리를 위한 패키지로, 전역적으로 사용할 수 있는 서비스를 쉽게 등록하고 액세스할 수 있도록 도와줍니다.

get_it 패키지 설치하기

프로젝트의 pubspec.yaml 파일에 다음과 같이 get_it 패키지를 추가해주세요:

dependencies:
  get_it: ^6.1.1

그리고 패키지를 업데이트해주세요:

flutter pub get

다이얼로그 서비스 생성하기

먼저, dialog_service.dart 파일을 생성하고 다음과 같이 다이얼로그 서비스를 구현해주세요:

import 'package:flutter/material.dart';

class DialogService {
  static GlobalKey<NavigatorState> _dialogNavigationKey = GlobalKey<NavigatorState>();

  static GlobalKey<NavigatorState> get dialogNavigationKey => _dialogNavigationKey;

  Future showDialog(String title, String message) async {
    return showDialog(
      context: _dialogNavigationKey.currentContext!,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text(title),
          content: Text(message),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('확인'),
            ),
          ],
        );
      },
    );
  }
}

showDialog 메서드는 제목(title)과 메시지(message)를 매개변수로 받아 알림 다이얼로그를 표시합니다.

get_it에 다이얼로그 서비스 등록하기

main.dart 파일에 get_it을 임포트하고 다이얼로그 서비스를 등록해보겠습니다:

import 'package:get_it/get_it.dart';
import 'dialog_service.dart';

void setupLocator() {
  GetIt.instance.registerLazySingleton(() => DialogService());
}

void main() {
  setupLocator();
  runApp(MyApp());
}

이제 다이얼로그 서비스를 get_it에 등록했습니다.

get_it를 통해 다이얼로그 서비스 사용하기

이제 get_it를 사용하여 다이얼로그 서비스를 어디서든 액세스할 수 있습니다. 예를 들어, 홈 화면에서 버튼을 눌렀을 때 다이얼로그를 표시하고 싶다면 다음과 같이 코드를 작성할 수 있습니다:

import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';
import 'dialog_service.dart';

class HomePage extends StatelessWidget {
  final DialogService _dialogService = GetIt.instance<DialogService>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('홈 페이지'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            _dialogService.showDialog('알림', '알림 메시지 예시입니다.');
          },
          child: Text('다이얼로그 표시'),
        ),
      ),
    );
  }
}

위 코드에서 _dialogService.showDialog() 메서드를 통해 다이얼로그를 표시할 수 있습니다.

결론

이제 get_it 패키지를 사용하여 플러터 앱에서 다이얼로그와 알림을 효율적으로 처리하는 방법을 알게되었습니다. get_it을 사용하면 전역적으로 사용될 서비스를 쉽게 등록하고 액세스할 수 있습니다.