Flutter - Creating Dialog in using GetX Library

Dialog Using GetX in Flutter

In this article, we will explore the Dialog Using GetX in Flutter. We will also implement a source code and learn how to create Dialog using the get package in your flutter applications.

Now let us see how we construct dialog in a flutter. you can use Get.defaultDialog() method to create a dialog in a flutter, this is a simple default dialog now let us create a dialog with some additional properties.

There are some properties of Get.defaultDialog() are:

title: In this property is used for the title of the Dialog. By default, the title is “Alert”.
titleStyle: In this property is used to the style given to the title text using TextStyle.
content: In this property is used for the content given to the Dialog and should use Widget to give content.
middleText: In this property is used in the middle text given to the Dialog. If we utilize content also then content widget data will be sown.
barrierDismissible: In this property is used 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: In this property is used for the style given to the middle text using TextStyle.
radius: In this property is utilized to the radius of the Dialog provided. By default, its value is 20.
backgroundColor: In this property is used as the background color of the Dialog.

Here is a full Sorce code for Creating a dialog using GetX Library or Watch Video tutorials Here

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

void main() {
  runApp(
    dialog(),
  );
}

class dialog extends StatelessWidget {
  const dialog({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
        title: "Dialog",
        home: Scaffold(
          appBar: AppBar(
            title: Text("Dialog using Grtx"),
          ),
          body: ElevatedButton(
              onPressed: () {
                Get.defaultDialog(
                    title: "Dialog using GetX",
                    titleStyle: const TextStyle(
                      fontSize: 20,
                    ),
                    middleText: "this is midle text",
                    middleTextStyle: TextStyle(fontSize: 18),
                    backgroundColor: Colors.purple,
                    radius: 30,
                    //Content Property Overide The Middle Text
                    content: Row(
                      children: const [
                        CircularProgressIndicator(),
                        Expanded(child: Text("this overide Middle text")),
                      ],
                    ),
                    textCancel: "Cancel",
                    cancelTextColor: Colors.white,
                    textConfirm: "Confirm",
                    confirmTextColor: Colors.white,
                    onCancel:
                        () {}, //perform something when Cancel Button Clicked,
                    onConfirm: () {}, // perform something when Confirm button
                    //this overid textCancel and TextConform properties

                    cancel: Text("Cancel noww"),
                    confirm: Text("Confirm"),

                    //You can add Action Property if you want but is it optional
                    actions: [
                      ElevatedButton(onPressed: () {}, child: Text("Submit")),
                      ElevatedButton(onPressed: () {}, child: Text("Cancel"))
                    ]);
              },
              child: Text("show Dialo")),
        ));
  }
}