Skip to content
Related Articles

Related Articles

Improve Article

Flutter – Creating Dialog in using GetX Library

  • Difficulty Level : Expert
  • Last Updated : 14 May, 2021

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :