Hello everyone, I am writing this article for sharing how to show dialog. I will introduce how to use GetX to show Dialog in Flutter. You can find the full source code of this blog on on the below link:
GetX Installation
Before starting, I will show you how to create a new Flutter project.
flutter create dialog_application
Open Default Dialog
GetX provides a simple method for creating AlertDialog in Flutter. Now, I will show you how to show dialog as following:
Above code, it will show a default Alert Dialog that is dismissible by tapping outside the dialog. However, I will show you how to customize for title and message a below code:
On other hands, the GetX dialog can adding confirm and cancel button like Confirm Dialog.
Get.defaultDialog(
title: 'GetX Alert',
middleText: 'Do you want to close?',
textConfirm: 'OK',
confirmTextColor: Colors.amberAccent,
textCancel: 'Cancel');
GetX Dialog with AlertDialog in Flutter
In here, I will show other way to show dialog in Flutter with GetX by using Get.dialog function:
Get.dialog( AlertDialog());
Checking Dialog Event
In GetX, dialog provides the event for checking dialog open or close.
Get.isDialogOpen
To check the dialog was open by following below code:
void openDialog(){
Future.delayed(Duration(seconds: 1)),(){
print(Get.isDialogOpen);
});
Get.dialog(...);
}
After execute the above code, the printing true result will show after 1 second.
flutter: true
Full Code Example for default Dialog
Please open the lib/main.dart file and modify with following:
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);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'GetX Dialog',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'GetX Dialog'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void defaultDailog() {
Future.delayed(const Duration(seconds: 1), () {
print(Get.isDialogOpen);
});
Get.defaultDialog(
title: 'GetX alert', middleText: 'Hello, here is dialog in getx');
}
void defaultConfirmDialog() {
Future.delayed(const Duration(seconds: 1), () {
print(Get.isDialogOpen);
});
Get.defaultDialog(
title: 'GetX alert',
middleText: 'Hello, here is dialog in getx',
textConfirm: "OK",
confirmTextColor: Colors.amberAccent,
barrierDismissible: false,
textCancel: 'Cancel');
}
void customAlertDialog() {
Future.delayed(const Duration(seconds: 1), () {
print(Get.isDialogOpen);
});
Get.dialog(const AlertDialog(
title: Text('GetX alert'),
));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
OutlinedButton(
onPressed: () {
defaultDailog();
},
child: Text("GetX Default Dialog")),
OutlinedButton(
onPressed: () {
defaultConfirmDialog();
},
child: Text("GetX Confirm Dialog")),
OutlinedButton(
onPressed: () {
customAlertDialog();
},
child: Text("GetX Custom Dialog"))
],
),
),
);
}
}
0 Comments