[GetX] Dialog

2022-01-24 hit count image

Let's see how to show Dialog with GetX in Flutter.

Outline

In this blog post, I will introduce how to use GetX to show Dialog in Flutter. You can see full source code of this blog post on the link below.

Blog series

This blog post is made in the series about how to use GetX in Flutter. If you want to see the other features of the GetX, please check out the following blog posts.

GetX installation

To check how to use GetX in Flutter, execute the command below to create a new Flutter project.

flutter create dialog

And then, execute the command below to install the GetX package.

flutter pub add get

Next, let’s see how to use GetX to show Dialog.

Open Dialog

You can use the Get.dialog function to show Dialog with GetX like the below.

Get.dialog(
  AlertDialog(),
);

To check this, open the lib/main.dart file and modify it like the below.

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

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

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

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  void openDialog() {
    Get.dialog(
      AlertDialog(
        title: const Text('Dialog'),
        content: const Text('This is a dialog'),
        actions: [
          TextButton(
            child: const Text("Close"),
            onPressed: () => Get.back(),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Dialog"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('Dialog example'),
            OutlinedButton(
              onPressed: openDialog,
              child: const Text('Open'),
            )
          ],
        ),
      ),
    );
  }
}

When you execute the above code, you will see the following screen.

Flutter - GetX dialog open button

And then, when you press the Open button, Get.dialog is called like the below.

void openDialog() {
  Get.dialog(
    AlertDialog(
      title: const Text('Dialog'),
      content: const Text('This is a dialog'),
      actions: [
        TextButton(
          child: const Text("Close"),
          onPressed: () => Get.back(),
        ),
      ],
    ),
  );
}

After that, you can see the dialog like the below.

Flutter - GetX dialog

Close Dialog

To close the opened Dialog, you can use the Get.back function.

Get.back();

In the example, the Get.back() function is called when the close button is pressed like the below.

void openDialog() {
  Get.dialog(
    AlertDialog(
      ...
      actions: [
        TextButton(
          child: const Text("Close"),
          onPressed: () => Get.back(),
        ),
      ],
    ),
  );
}

Check Dialog

In GetX, you can use the below code to check the Dialog is opened or not.

Get.isDialogOpen

To check this, modify the openDialog() function like the below.

void openDialog() {
  Future.delayed(const Duration(seconds: 1), () {
    // ignore: avoid_print
    print(Get.isDialogOpen);
  });

  Get.dialog(
    ...
  );
}

When you execute the above code, you can see the true is printed after 1 second.

flutter: true

Completed

Done! we’ve seen how to use GetX to show the Dialog in Flutter. Also, we’ve seen how to close the dialog and how to check the dialog is opened or not.

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

Posts