Flutter – Creating Dialog in using GetX Library

When we want to show anything in the form of the dialog then we can create this Dialog using the GetX library in Flutter. When we normally create a dialog in flutter then it uses context and builder to create a Dialog. This is not a good practice for a developer to create Dialogs using contexts and builders. To overcome this problem, we can create Dialog using GetX with simple code and very easy to create a dialog. It does not use context and builder to create Dialog.

Follow the steps to create a Dialog in flutter using the GetX library:

• Create a new Flutter app:

flutter create APP_NAME

• Add get under dependencies in pubspec.yaml file:

• Import get in main.dart

import 'package:get/get.dart';

The constructor of Get.defaultDialog():

defaultDialog<T>({
String title = "Alert", 
TextStyle? titleStyle, 
Widget? content, 
void Function()? onConfirm, 
void Function()? onCancel, 
void Function()? onCustom, 
Color? cancelTextColor, 
Color? confirmTextColor, 
String? textConfirm, 
String? textCancel, 
String? textCustom, 
Widget? confirm, 
Widget? cancel, 
Widget? custom, 
Color? backgroundColor, 
bool barrierDismissible = true, 
Color? buttonColor, 
String middleText = "Dialog made in 3 lines of code", 
TextStyle? middleTextStyle, 
double radius = 20.0, 
List<Widget>? actions, 
Future<bool> Function()? onWillPop})

Let’s discuss some properties of Get.defaultDialog():

• title: The title of the Dialog. By default, the title is “Alert”.
• titleStyle: The style given to the title text using TextStyle.
• content: The content given to the Dialog and should use Widget to give content.
• middleText: The middle text given to the Dialog. If we use content also then content widget data will be displayed.
• barrierDismissible: If we want to close the Dialog by clicking outside the dialog then its value should be true else false. By default, its value is true.
• middleTextStyle: The style given to the middle text using TextStyle.
• radius: The radius of the Dialog provided. By default, its value is 20.
• backgroundColor: The background color of the Dialog.

The main.dart file:

Dart

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

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

class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Dialog Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks Dialog'),
        centerTitle: true,
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Show Dialog'),
          onPressed: (){
            Get.defaultDialog(

            );
          },
        )
      ),
    );
  }
}

Explanation:

• The first step is to create an app and run it.
• We have used GetMaterialApp instead of MaterialApp because we are building our app using GetX library. If we do not use GetMaterialApp then its functionalities will not work.
• Then we have created a Home class that is Stateless. Then we have created a Scaffold widget.
• In the body, create a button in the center.
• Create dialog using Get.defaultDialog() .
• We can add extra features to this default dialog like backgroundColor, the radius of dialog, middle text, barrierDismissible, etc.

Output:

Get.defaultDialog(
              title: "GeeksforGeeks",
              middleText: "Hello world!",
              backgroundColor: Colors.green,
              titleStyle: TextStyle(color: Colors.white),
              middleTextStyle: TextStyle(color: Colors.white),

            );

When the above code is executed, the output will be:

Get.defaultDialog(
              title: "GeeksforGeeks",
              middleText: "Hello world!",
              backgroundColor: Colors.green,
              titleStyle: TextStyle(color: Colors.white),
              middleTextStyle: TextStyle(color: Colors.white),
              textConfirm: "Confirm",
              textCancel: "Cancel",
              cancelTextColor: Colors.white,
              confirmTextColor: Colors.white,
              buttonColor: Colors.red,
              barrierDismissible: false,
              radius: 50,
              content: Column(
                children: [
                  Container(child:Text("Hello 1")),
                  Container(child:Text("Hello 2")),
                  Container(child:Text("Hello 3")),
                ],
              )
            );

When we execute the above code, the output will be: