GetX dialog implementation in flutter app for beginners

Getx Dialog :

In this tutorial we will be dealing with how to display a default dialog box using the powerful library GetX, in our previous tutorial we have seen snackbar implementation using flutter Getx.

GetX is considered the most powerful yet simple to use library even a novice / beginner can easily understand the implementations.

There are set of functionality’s we can make use of GetX, this single library can be used in various scenario’s which we have discussed on our tutorials.

You can go through our previous tutorials on GetX to get more information on this topic.

dependencies :

Specify the dependency Get under the dependency’s inside the pubspec file and provide the latest version to avoid code level issues.

dependencies:
  flutter:
    sdk: flutter
  get: ^4.1.4

main.dart :

Providing the full source code for Dialog implementation using GetX.Here i have considered few basic fields such that they are most commonly used.

You may append them and change according to your requirement.

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

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

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

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Getx"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextButton(
                  onPressed: () {
                    Get.defaultDialog(
                      title: "Sample Dialog",
                      middleText: "You content goes here...",
                      content: getContent(),
                      barrierDismissible: false,
                      radius: 50.0,
                      confirm: confirmBtn(),
                      cancel: cancelBtn(),
                    );
                  },
                  child: Text("Dialog"))
            ],
          ),
        ),
      ),
    );
  }
}

Widget getContent() {
  return Column(
    children: [
      Text("Your content goes here widget"),
      Text("Your content goes here widget"),
      Text("Your content goes here widget"),
      Text("Your content goes here widget"),
    ],
  );
}

Widget confirmBtn() {
  return ElevatedButton(onPressed: () {
    Get.back();
  }, child: Text("Confirm"));
}


Widget cancelBtn() {
  return ElevatedButton(onPressed: () {
    Get.back();
  }, child: Text("Cancel"));
}

GetX Dialog Output :

The screen below depicts the usage of flutter dialog implementation using GetX.

If you have any queries in this tutorial on flutter GetX dialog do let us know in the comment section below.If you like this tutorial do like and share us for more interesting tutorials coming up.