플러터 패키지 adaptive_dialog 2.3.0 사용법: 다양한 다이얼로그 쉽게 구현하기

Flutter로 앱을 개발하다 보면 사용자와의 상호작용을 위한 다이얼로그(Dialog)를 자주 사용하게 됩니다.

하지만 기본 제공되는 다이얼로그는 커스터마이징하기 어렵고, 여러 플랫폼(Android/iOS)에 맞춘 디자인을 구현하려면 번거로운 작업이 필요합니다.

이 문제를 해결하기 위해 adaptive_dialog 패키지가 유용합니다.

이번 글에서는 adaptive_dialog 2.3.0 패키지를 설치하고 사용하는 방법을 단계별로 알아보겠습니다.

1. adaptive_dialog란?

adaptive_dialog는 Flutter에서 다양한 다이얼로그(알림창, 옵션 선택창, 텍스트 입력창 등)를 쉽게 구현할 수 있도록 도와주는 패키지입니다.

플랫폼(Android/iOS)에 맞는 네이티브 스타일의 다이얼로그를 자동으로 생성하며, 커스터마이징 기능도 제공합니다.

2. 설치 방법

1. pubspec.yaml 파일에 패키지 추가

dependencies:
  adaptive_dialog: ^2.3.0

 

2. 설치 명령 실행

flutter pub get

설치가 완료되면 이제 본격적으로 사용해 봅시다.

3. 주요 기능 및 사용법

1) 기본 알림창 (Alert Dialog)

알림창은 사용자가 정보를 확인하거나 간단한 선택을 해야 할 때 유용합니다.

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

void showAlert(BuildContext context) async {
  final result = await showOkCancelAlertDialog(
    context: context,
    title: '알림',
    message: '이 작업을 진행하시겠습니까?',
    okLabel: '확인',
    cancelLabel: '취소',
  );

  if (result == OkCancelResult.ok) {
    print('확인 버튼 클릭');
  } else {
    print('취소 버튼 클릭');
  }
}

 

• showOkCancelAlertDialog: 확인/취소 버튼이 있는 기본 알림창을 표시합니다.
• OkCancelResult: 사용자가 선택한 결과를 반환합니다.

2) 옵션 선택창 (Selection Dialog)

사용자가 여러 옵션 중 하나를 선택해야 할 때 사용합니다.

import 'package:adaptive_dialog/adaptive_dialog.dart';

void showSelectionDialog(BuildContext context) async {
  final result = await showConfirmationDialog<String>(
    context: context,
    title: '옵션 선택',
    message: '원하는 옵션을 선택하세요:',
    actions: ['옵션 1', '옵션 2', '옵션 3'],
  );

  if (result != null) {
    print('선택한 옵션: $result');
  }
}

 

 

• showConfirmationDialog: 여러 옵션을 제공하고 사용자가 하나를 선택하도록 합니다.
• actions: 선택 가능한 옵션 리스트를 제공합니다.

3) 텍스트 입력창 (Text Input Dialog)

사용자로부터 입력을 받을 때 유용합니다.

import 'package:adaptive_dialog/adaptive_dialog.dart';

void showInputDialog(BuildContext context) async {
  final result = await showTextInputDialog(
    context: context,
    title: '입력창',
    message: '이름을 입력하세요:',
    okLabel: '확인',
    cancelLabel: '취소',
  );

  if (result != null && result.isNotEmpty) {
    print('입력한 값: ${result.first}');
  }
}

 

 

• showTextInputDialog: 텍스트 입력을 받을 수 있는 다이얼로그를 표시합니다.
• result: 사용자가 입력한 값을 리스트 형태로 반환합니다.

4) 플랫폼 스타일 자동 적용

adaptive_dialog는 플랫폼에 따라 다이얼로그 스타일을 자동으로 변경합니다.

• iOS: Cupertino 스타일 사용
• Android: Material 스타일 사용

따라서 추가적인 작업 없이 플랫폼에 맞는 네이티브 스타일의 다이얼로그를 사용할 수 있습니다.

4) 플랫폼 스타일 자동 적용

adaptive_dialog는 플랫폼에 따라 다이얼로그 스타일을 자동으로 변경합니다.

• iOS: Cupertino 스타일 사용
• Android: Material 스타일 사용

따라서 추가적인 작업 없이 플랫폼에 맞는 네이티브 스타일의 다이얼로그를 사용할 수 있습니다.

final result = await showOkCancelAlertDialog(
  context: context,
  title: '알림',
  message: '색상을 커스터마이징한 다이얼로그입니다.',
  okLabel: '확인',
  cancelLabel: '취소',
  style: AdaptiveStyle.material,
);

 

2) 텍스트 입력 기본값 제공

final result = await showTextInputDialog(
  context: context,
  title: '입력창',
  message: '기본값이 있는 입력창 예제',
  okLabel: '확인',
  cancelLabel: '취소',
  textFields: [
    DialogTextField(initialText: '기본값 입력'),
  ],
);

 

adaptive_dialog 2.3.0 패키지는 Flutter에서 다이얼로그를 쉽고 효율적으로 구현할 수 있는 강력한 도구입니다. 플랫폼 스타일을 자동으로 적용하며, 다양한 다이얼로그 유형을 지원해 개발 시간을 단축시킬 수 있습니다.

핵심 요약

• 설치: flutter pub add adaptive_dialog
• 알림창: showOkCancelAlertDialog
• 옵션 선택: showConfirmationDialog
• 텍스트 입력: showTextInputDialog

이 패키지를 사용하면 다이얼로그 구현이 훨씬 간편해지며, Flutter 앱의 사용자 경험을 한 단계 업그레이드할 수 있습니다. 더 많은 기능은 공식 문서를 참고하세요!

 

구독!! 공감과 댓글,

광고 클릭은 저에게 큰 힘이 됩니다.

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱