Flutter – Creating Dialog in using GetX Library
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 '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 {
@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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...