[Flutter] 기본 Dialog 사용법

 

 

 

이번 포스팅에서는 Flutter에서 사용되는 기본 Dialog에 대해 알아보겠습니다. 

 

Dialog의 속성에는 여러가지가 있습니다. 배경색, 배경 터치여부, 키보드가 올라왔을 때 영역/애니메이션 설정 등. 이러한 속성들을 알아보고, 각 속성들이 어떤 역할을 하고 있는지 알아보겠습니다.

 

 

대부분의 설명은 예제에 주석으로 추가했지만 Dialog에서 잘 안쓰이는 특성들 몇 가지만 추가적으로 설명하겠습니다. 

 

• alignment : 다이얼로그의 위치를 설정해줍니다. 예제에서는 bottomCenter로 주었기 때문에 화면 하단에 노출됩니다.
• insetAnimationDuration, insetAnimationCurve : 화면에 키보드가 올라왔을 때 동작하는 특성들입니다.
  키보드가 올라오면서 화면이 줄어들기 때문에 다이얼로그의 사이즈도 줄어들게 됩니다. insetAnimationDuration 특성은 줄어들고, 커지는 시간을 설정해줍니다. insetAnimationCurve 특성은 줄어들고, 커질 때 애니메이션을 설정해줍니다. 
• insetPadding : 말 그대로 padding 값을 주는데, dialog의 child 위젯 내부에 들어가는 것이 아니라 child 위젯 바깥에 들어가는 padding입니다. 주의할 점은 패딩을 많이 주면 키보드가 올라왔을 때 overflow 오류가 발생할 수 있습니다. 
• Dialog의 return 값 : return값을 주기 위해서는 Navigator.pop()에 result 값을 넣어주는 것입니다. 배경 터치를 허용하고, 배경을 터치했을 때는 null값이 return됩니다. showDialog에 return 타입도 설정해줄 수 있습니다. 예제에서는 String타입을 설정했습니다. 

 

 

그 외 자세한 설명은 예제의 주석을 참조해주세요.

 

 

 

예제 영상

 

 

 

Full code

  void show() {
    showDialog<String>(
      context: context,

      /// 다이얼로그 배경 컬러
      // barrierColor: Colors.cyan.withOpacity(0.4),

      /// 다이얼로그 배경을 터치했을 때 다이얼로그를 닫을지 말지 결정
      /// true = 닫을 수 있음, false = 닫을 수 없음
      barrierDismissible: true,

      builder: (context) {
        return Dialog(
          /// 배경 컬러
          backgroundColor: Colors.grey.shade100,

          /// 그림자 컬러
          shadowColor: Colors.blue,

          /// 다이얼로그의 모양 설정
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20),
          ),

          /// z축 높이, elevation의 값이 높을 수록 그림자가 아래 위치하게 됩니다.
          elevation: 10,

          /// 다이얼로그의 위치 설정, 기본값은 center
          alignment: Alignment.bottomCenter,

          /// Dialog의 padding 값입니다..
          /// sizedBox의 가로세로 값읠 infinity로 설정해놓고
          /// 가로패딩 50, 세로 패딩 200을 줬습니다.
          /// 이렇게 하면 좌우 50, 위아래 200만큼의 패딩이 생기고 배경이 나오게 됩니다.
          /// 여기서 vertical의 값을 많이 주면,
          /// 키보드가 올라왔을 때 공간이 부족해서 overflow가 발생할 수 있습니다.
          insetPadding: const EdgeInsets.symmetric(
            horizontal: 50,
            vertical: 100,
          ),

          /// Material 3 에서만 사용됨
          // surfaceTintColor: Colors.green,

          /// 소프트키보드가 올라왔을 때 다이얼로그의 사이즈가 조절되는 시간
          insetAnimationDuration: const Duration(milliseconds: 1000),

          /// 소프트키보드가 올라왔을 때 다이얼로그 사이즈 변경 애니메이션
          insetAnimationCurve: Curves.bounceOut,

          child: SizedBox(
              width: 100,
              height: 200,
              child: Column(
                children: [
                  const SizedBox(height: 16),
                  const Text(
                    "다이얼로그",
                    style: TextStyle(fontSize: 20),
                  ),
                  TextFormField(
                    decoration: const InputDecoration(
                      hintText: "검색어를 입력해주세요",
                    ),
                  ),
                  const SizedBox(height: 20),
                  SizedBox(
                    width: 200,
                    height: 40,
                    child: ElevatedButton(
                        onPressed: () {

                          /// Navigator.pop에서 result값을 넣어주면
                          /// showDialog의 return 값이 됩니다.
                          Navigator.pop(context, "return value");
                        },
                        child: const Text("확인")),
                  ),
                ],
              )),
        );
      },
    ).then((value) {
      /// Navigator.pop 의 return 값이 들어옵니다.
    }).whenComplete(() {
      /// 다이얼로그가 종료됐을 때 호출됩니다.
    });
  }