[Flutter] Getx Dialog

Getx를 통해 많이 사용하는 기능중 하나가 Get.dialog() 입니다.

Flutter에서 material의 기능 중 showDialog를 통해 dialog를 만들 수 있지만, 

제 생각에는 2가지 단점이 있는 것 같습니다.

 

1. 너무 안드로이드스러운 UI로 인해 iOS앱에서는 뭔가 어색해 보입니다.

아이폰에서 안드로이드를 사용하는 듯한 느낌이 들죠.

2. 1번과 연결되는 내용이지만 customizing한 dialog를 만들기 어려운 단점이 있습니다.

앱의 기능에 따라 본인만의 dialog가 필요한 경우가 있기 때문이죠.

 

Getx를 통한 다이얼로그는 아래 코드로 간단하게 다이얼로그를 띄울 수 있습니다.

 

Get.dialog(
  const Dialog(
    child: Text('Getx Dialog'),
  )
);

 

Get.dialog() 안에 Dialog() 를 통해 다이얼로그를 띄운 다음 부터는 일반 위젯 디자인과 동일하게 사용할 수 있습니다.

아래는 간단한 예제입니다. Dialog()의 child를 통해 커스터마이징 된 다이얼로그를 만들면 됩니다.

 

Get.dialog(
  Dialog(
    child: Container(
      padding: EdgeInsets.all(15),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('Getx Dialog'),
          SizedBox(height: 15,),
          ElevatedButton(
              onPressed: () {
                Get.back();
              }, 
              child: Text('Close'))
        ],
      ),
    ),
  )
);

 

결과 화면