플러터 Get.dialog 사용법 및 옵션 완벽 가이드

플러터 Get.dialog 사용법 및 옵션 완벽 가이드

GetX 라이브러리의 Get.dialog 함수는 다양한 상황에 유용한 다이얼로그를 간편하게 생성하는 데 사용할 수 있는 강력한 도구입니다.

이 블로그 게시물에서는 Get.dialog의 작동 방식, 다양한 옵션 및 사용법에 대해 자세히 살펴보겠습니다.

 

우선, GetX 패키지를 프로젝트에 추가합니다. pubspec.yaml 파일에 다음 의존성을 추가하세요

dependencies:
  flutter:
    sdk: flutter
  get: ^4.3.8

 

1. 기본 사용법

Get.dialog 함수는 제목과 내용 위젯을 매개변수로 받아 기본 다이얼로그를 표시합니다.

Get.dialog(
  title: "제목",
  content: Text("내용"),
);

 

2. 옵션 사용하기

Get.dialog 함수는 다양한 옵션을 제공하여 다이얼로그의 모양과 동작을 원하는대로 조정할 수 있도록 합니다.

• title: 다이얼로그의 제목을 설정합니다. (기본값: null)
• content: 다이얼로그의 내용을 나타내는 위젯을 설정합니다.
• textConfirm: 확인 버튼의 텍스트를 설정합니다. (기본값: "확인")
• textCancel: 취소 버튼의 텍스트를 설정합니다. (기본값: "취소")
• onConfirm: 확인 버튼을 클릭했을 때 실행할 함수를 설정합니다.
• onCancel: 취소 버튼을 클릭했을 때 실행할 함수를 설정합니다.
• middleText: 다이얼로그 본문 아래에 표시되는 텍스트를 설정합니다.
• backgroundColor: 다이얼로그 배경색을 설정합니다. (기본값: Colors.white)
• barrierColor: 다이얼로그 외부 영역의 색상을 설정합니다. (기본값: Colors.black54)
• radius: 다이얼로그 모서리의 곡률 반경을 설정합니다. (기본값: 16.0)
• actions: 다이얼로그 아래에 표시되는 작업 버튼 목록을 설정합니다.
• customDialog: 사용자 정의 다이얼로그 위젯을 설정합니다.

3. 다양한 다이얼로그 만들기

Get.dialog 함수를 사용하여 확인/취소 버튼, 로딩 표시, 커스텀 다이얼로그 등 다양한 종류의 다이얼로그를 만들 수 있습니다.

예시 1: 확인/취소 버튼이 있는 다이얼로그

Get.dialog(
  title: "알림",
  content: Text("삭제하시겠습니까?"),
  textConfirm: "삭제",
  textCancel: "취소",
  onConfirm: () {
    // 삭제 처리
  },
  onCancel: () {
    // 취소 처리
  },
);

 

예시 2: 로딩 표시 다이얼로그

Get.dialog(
  title: "로딩 중",
  content: Center(child: CircularProgressIndicator()),
);

 

예시 3: 커스텀 다이얼로그

Get.dialog(
  customDialog: MyCustomDialog(),
);

class MyCustomDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Dialog(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Text("제목"),
            Text("내용"),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: Text("확인"),
                ),
                ElevatedButton(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: Text("취소"),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

 

4. 주의 사항

 

4.1 여러 개의 다이얼로그 중첩 표시

Get.dialog 함수는 여러 개의 다이얼로그를 중첩하여 표시할 수 있습니다. 하지만, 주의해야 할 점이 있습니다.

• 후에 표시된 다이얼로그가 먼저 표시된 다이얼로그를 덮어버립니다.
• 모든 다이얼로그를 닫기 위해서는 각 다이얼로그에서 Navigator.pop을 호출해야 합니다.

예를 들어, 다음 코드는 두 개의 다이얼로그를 중첩하여 표시합니다.

 

Get.dialog(
  title: "다이얼로그 1",
  content: Text("내용 1"),
);

Get.dialog(
  title: "다이얼로그 2",
  content: Text("내용 2"),
);

 

이 경우, "다이얼로그 2"가 "다이얼로그 1"을 덮어버려 "다이얼로그 1"을 볼 수 없습니다.

"다이얼로그 1"을 닫으려면 Get.back() 함수를 사용하고, "다이얼로그 2"를 닫으려면 Navigator.pop(context) 함수를 사용해야 합니다.

 

Get.dialog(
  title: "다이얼로그 1",
  content: Text("내용 1"),
  onConfirm: () {
    Get.back(); // 다이얼로그 1 닫기
  },
);

Get.dialog(
  title: "다이얼로그 2",
  content: Text("내용 2"),
);

 

4.2 배경 터치 처리

Get.dialog 함수는 기본적으로 다이얼로그 외부 영역을 터치하면 닫히지 않습니다. 하지만, barrierDismissible 옵션을 true로 설정하면 다이얼로그 외부 영역을 터치하면 닫히도록 변경할 수 있습니다.

 

Get.dialog(
  title: "다이얼로그",
  content: Text("내용"),
  barrierDismissible: true,
);

 

4.3 애니메이션

Get.dialog 함수는 다이얼로그가 표시되고 닫히는 동안 기본적인 애니메이션을 제공합니다. 하지만, transition 옵션을 사용하여 커스텀 애니메이션을 설정할 수도 있습니다.

 

Get.dialog(
  title: "다이얼로그",
  content: Text("내용"),
  transition: DialogTransition.fade,
);

 

DialogTransition enum에는 다음과 같은 값들이 있습니다:

• DialogTransition.cupertino: 쿠퍼티노 스타일의 애니메이션을 사용합니다.
• DialogTransition.fade: 페이드 인/아웃 애니메이션을 사용합니다.
• DialogTransition.bottomToTop: 아래에서 위로 올라오는 애니메이션을 사용합니다.
• DialogTransition.topRightToLeft: 오른쪽 상단에서 왼쪽 하단으로 이동하는 애니메이션을 사용합니다.

4.4 테스트

Get.dialog 함수는 유닛 테스트를 작성하기 어려울 수 있습니다. 하지만, test_flutter 패키지를 사용하여 다이얼로그가 올바르게 표시되고 닫히는지 테스트할 수 있습니다.

 

import 'package:flutter_test/flutter_test.dart';
import 'package:get/get.dart';

void main() {
  test('Get.dialog 테스트', () async {
    // 다이얼로그 표시
    Get.dialog(
      title: "다이얼로그",
      content: Text("내용"),
    );

    // 다이얼로그가 표시되었는지 확인
    expect(Get.currentRoute.isActive, true);

    // 확인 버튼 클릭
    await Get.find<MyCustomDialog>().confirm();

    // 다이얼로그가 닫혔는지 확인
    expect(Get.currentRoute.isActive, false);
  });
}

 

5. Get.dialog 활용 사례

Get.dialog 함수는 다양한 상황에 유용하게 활용할 수 있습니다. 몇 가지 예시를 살펴보겠습니다.

 

5.1 로딩 표시

네트워크 요청이나 데이터 처리 작업이 진행되는 동안 로딩 표시를 표시하는 데 사용할 수 있습니다.

 

Get.dialog(
  title: "로딩 중",
  content: Center(child: CircularProgressIndicator()),
);

 

5.2 확인/취소 알림

사용자에게 중요한 결정을 내리도록 요청할 때 확인/취소 알림을 표시하는 데 사용할 수 있습니다.

 

Get.dialog(
  title: "알림",
  content: Text("삭제하시겠습니까?"),
  textConfirm: "삭제",
  textCancel: "취소",
  onConfirm: () {
    // 삭제 처리
  },
  onCancel: () {
    // 취소 처리
  },
);

 

5.3 정보 입력

사용자로부터 정보를 입력받는 데 사용할 수 있습니다.

 

Get.dialog(
  title: "정보 입력",
  content: Column(
    children: [
      TextField(
        decoration: InputDecoration(labelText: "이름"),
      ),
      TextField(
        decoration: InputDecoration(labelText: "이메일"),
      ),
    ],
  ),
  textConfirm: "완료",
  onConfirm: () {
    String name = Get.find<MyCustomDialog>().nameController.text;
    String email = Get.find<MyCustomDialog>().emailController.text;

    // 입력된 정보 처리
  },
);

class MyCustomDialog extends StatelessWidget {
  final TextEditingController nameController = TextEditingController();
  final TextEditingController emailController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Dialog(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Text("정보 입력"),
            TextField(
              controller: nameController,
              decoration: InputDecoration(labelText: "이름"),
            ),
            TextField(
              controller: emailController,
              decoration: InputDecoration(labelText: "이메일"),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: Text("취소"),
                ),
                ElevatedButton(
                  onPressed: () {
                    Get.find<MyCustomDialog>().confirm();
                  },
                  child: Text("완료"),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

 

5.4 이미지 표시

사용자에게 이미지를 표시하는 데 사용할 수 있습니다.

 

Get.dialog(
  title: "이미지",
  content: Image.network("https://example.com/image.jpg"),
);

 

5.5 웹 페이지 표시

사용자에게 웹 페이지를 표시하는 데 사용할 수 있습니다.

 

Get.dialog(
  title: "웹 페이지",
  content: WebView(
    initialUrl: "https://example.com",
  ),
);

 

5.6 커스텀 다이얼로그

완전히 커스텀된 다이얼로그를 만들 수 있습니다.

 

Get.dialog(
  customDialog: MyCustomDialog(),
);

class MyCustomDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Dialog(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Text("제목"),
            Text("내용"),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: Text("확인"),
                ),
                ElevatedButton(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: Text("취소"),
                ),
              ],
            ),

 

5.7 다양한 다이얼로그 옵션 활용

Get.dialog 함수는 다양한 옵션을 제공하여 다이얼로그의 모양과 동작을 원하는대로 조정할 수 있도록 합니다.

• 제목 및 내용: title 및 content 옵션을 사용하여 다이얼로그의 제목과 내용을 설정할 수 있습니다.
• 확인/취소 버튼: textConfirm 및 textCancel 옵션을 사용하여 확인/취소 버튼의 텍스트를 설정할 수 있습니다.
• 버튼 이벤트: onConfirm 및 onCancel 옵션을 사용하여 확인/취소 버튼을 클릭했을 때 실행할 함수를 설정할 수 있습니다.
• 중앙 텍스트: middleText 옵션을 사용하여 다이얼로그 본문 아래에 표시되는 텍스트를 설정할 수 있습니다.
• 배경색: backgroundColor 옵션을 사용하여 다이얼로그 배경색을 설정할 수 있습니다.
• 방해 색상: barrierColor 옵션을 사용하여 다이얼로그 외부 영역의 색상을 설정할 수 있습니다.
• 모서리 곡률: radius 옵션을 사용하여 다이얼로그 모서리의 곡률 반경을 설정할 수 있습니다.
• 작업 버튼: actions 옵션을 사용하여 다이얼로그 아래에 표시되는 작업 버튼 목록을 설정할 수 있습니다.
• 커스텀 다이얼로그: customDialog 옵션을 사용하여 사용자 정의 다이얼로그 위젯을 설정할 수 있습니다.

6. Get.dialog 사용 시 주의 사항

• Get.dialog 함수는 Navigator.push와 달리 새로운 라우트를 만들지 않습니다. 따라서 다이얼로그 닫기 이전에 다른 라우트로 이동하려면 Navigator.pop을 명시적으로 호출해야 합니다.
• 여러 개의 다이얼로그를 중첩하여 표시할 수 있지만, 후에 표시된 다이얼로그가 먼저 표시된 다이얼로그를 덮어버리고, 모든 다이얼로그를 닫기 위해서는 각 다이얼로그에서 Navigator.pop을 호출해야 합니다.
• 기본적으로 다이얼로그 외부 영역을 터치하면 닫히지 않지만, barrierDismissible 옵션을 true로 설정하면 터치하면 닫히도록 변경할 수 있습니다.
• 다양한 애니메이션 효과를 적용할 수 있으며, test_flutter 패키지를 사용하여 다이얼로그가 올바르게 표시되고 닫히는지 테스트할 수 있습니다.

7. Get.dialog 사용법 및 활용 사례 요약

 

Get.dialog 함수는 플러터에서 다양한 종류의 다이얼로그를 간편하게 생성하고 사용자 경험을 향상시키는 데 유용한 도구입니다. 제목과 내용을 설정하는 기본적인 사용법부터 확인/취소 버튼, 로딩 표시, 커스텀 다이얼로그 등 다양한 활용 사례까지, 이 블로그 게시물에서 자세히 살펴보았습니다.

또한, Get.dialog 함수를 사용할 때 주의해야 할 사항과 다양한 옵션에 대한 설명도 포함되어 있으므로, 플러터 개발자가 Get.dialog 함수를 효과적으로 활용하는 데 도움이 되기를 바랍니다.

 

8. Get.dialog 사용법 및 활용 사례 추가 정보

 

8.1 GetX 버전에 따른 차이점

Get.dialog 함수는 GetX 버전에 따라 일부 차이점이 있을 수 있습니다.

• GetX 4.0.0 이전 버전:
  • customDialog 옵션 대신 content 옵션에 Widget 위젯을 직접 전달해야 합니다.
  • middleText, backgroundColor, barrierColor, radius, actions 옵션이 제공되지 않습니다.
• GetX 4.0.0 이상 버전:
  • customDialog 옵션을 사용하여 완전히 커스텀된 다이얼로그를 만들 수 있습니다.
  • middleText, backgroundColor, barrierColor, radius, actions 옵션을 사용하여 다이얼로그의 모양과 동작을 원하는대로 조정할 수 있습니다.

8.2 Get.dialog 관련 패키지

다음과 같은 패키지들이 Get.dialog 함수와 함께 사용될 수 있습니다.

• flutter_test: 다이얼로그가 올바르게 표시되고 닫히는지 테스트하는 데 사용할 수 있습니다.
• get_storage: 다이얼로그 내에서 설정 정보를 저장하고 불러오는 데 사용할 수 있습니다.
• get_navigation: 다이얼로그 내에서 다른 라우트로 이동하는 데 사용할 수 있습니다.

8.3 Get.dialog 관련 커뮤니티

다음과 같은 커뮤니티에서 Get.dialog 함수와 관련된 질문과 답변을 찾을 수 있습니다.

• GetX 공식 문서: https://github.com/jonataslaw/getx
• GetX GitHub 저장소: https://github.com/jonataslaw/getx
• GetX Stack Overflow 태그: https://stackoverflow.com/questions/71967958/getx-controller-in-stack-flutter

9. Get.dialog 사용법 및 활용 사례 관련 질문

Get.dialog 함수와 관련하여 궁금한 점이 있으면 언제든지 질문해주세요.