Dialog Using GetX in Flutter
Dialogs are fundamental parts of mobile Apps. They help to pass cautions and significant messages as well as on to do specific activities. At the point when flutter developers make a dialog in Flutter, it utilizes context and builder to make a Dialog. However, this training isn’t appropriate for a developer to foster Dialogs utilizing contexts and builders.
In this article, we will explore the Dialog Using GetX in Flutter. We will also implement a demo program and learn how to create Dialog using the get package in your flutter applications.
get | Flutter Package
GetX is an extra-light and powerful solution for Flutter. It combines high-performance state management, intelligence…pub.dev
Table Of Contents::
Introduction:
At the point when we need to show anything like the form then we can make this Dialog involving the GetX library in Flutter. We can make Dialog utilizing GetX with basic code and extremely simple to make a dialog. It doesn’t utilize context and builder to make Dialog.
GetX is additional light and strong solution for Flutter. It joins elite performance state management, intelligent dependency injection, and route management rapidly and essentially.
Demo Module ::
This demo video shows how to create a dialog in a flutter and shows how dialog will work using the get package in your flutter applications, and also using different properties. It will be shown on your device.
Constructor:
To utilize Get.defaultDialog(), you need to call the constructor underneath:
Future<T?> defaultDialog<T>({
String title = "Alert",
EdgeInsetsGeometry? titlePadding,
TextStyle? titleStyle,
Widget? content,
EdgeInsetsGeometry? contentPadding,
VoidCallback? onConfirm,
VoidCallback? onCancel,
VoidCallback? 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,
WillPopCallback? onWillPop,
GlobalKey<NavigatorState>? navigatorKey,
})
Properties:
There are some properties of Get.defaultDialog() are:
- > title: In this property is used to the title of the Dialog. By default, the title is “Alert”.
- > titleStyle: In this property is used to the style given to the title text using TextStyle.
- > content: In this property is used to the content given to the Dialog and should use Widget to give content.
- > middleText: In this property is used in the middle text given to the Dialog. If we utilize content also then content widget data will be sown.
- > barrierDismissible: In this property is used 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: In this property is used to the style given to the middle text using TextStyle.
- > radius: In this property is utilized to the radius of the Dialog provided. By default, its value is 20.
- > backgroundColor: In this property is used as the background color of the Dialog.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
flutter:
sdk: flutter
get: ^4.6.1
Step 2: Import
import 'package:get/get.dart';
Step 3: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
We have utilized GetMaterialApp rather than MaterialApp because we are building our application utilizing the GetX library. If we don’t utilize GetMaterialApp then, at that point, its functionalities won’t work.
return GetMaterialApp(
title: 'Dialog Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Splash(),
debugShowCheckedModeBanner: false,
);
We will create a Home class in the main.dart file
In the body, we will add a Center widget. In this widget, we will add a Column widget that was mainAxisAlignment was center. We will add things, first, we will add an image, and second, we will add an ElevatedButton with child and style properties. In the onPressed function, we will add Get.defaultDialog(). We will deeply describe it below.
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset("assets/logo.png", scale: 14,),
SizedBox(height: 80,),
ElevatedButton(
child: Text('Show Dialog'),
style: ElevatedButton.styleFrom(
primary: Colors.teal,
onPrimary: Colors.white,
shadowColor: Colors.tealAccent,
textStyle: TextStyle(
fontSize: 18,
),
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
minimumSize: Size(120, 50),
),
onPressed: () {
Get.defaultDialog();
},
),
],
)),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Now, we will deeply describe Get.defaultDialog():
Now you saw how easy it is to get a dialog with very few lines using GetX in Flutter. You can also customize it with different options given by GetX. We will add title, middle text, backgroundColor, titleStyle, middleTextStyle and radius.
Get.defaultDialog(
title: "Welcome to Flutter Dev'S",
middleText: "FlutterDevs is a protruding flutter app development company with "
"an extensive in-house team of 30+ seasoned professionals who know "
"exactly what you need to strengthen your business across various dimensions",
backgroundColor: Colors.teal,
titleStyle: TextStyle(color: Colors.white),
middleTextStyle: TextStyle(color: Colors.white),
radius: 30
);
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_dialog_getx_demo/splash_screen.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: Splash(),
debugShowCheckedModeBanner: false,
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text('Dialog Using GetX In Flutter'),
centerTitle: true,
backgroundColor: Colors.cyan,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset("assets/logo.png", scale: 14,),
SizedBox(height: 80,),
ElevatedButton(
child: Text('Show Dialog'),
style: ElevatedButton.styleFrom(
primary: Colors.teal,
onPrimary: Colors.white,
shadowColor: Colors.tealAccent,
textStyle: TextStyle(
fontSize: 18,
),
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
minimumSize: Size(120, 50),
),
onPressed: () {
Get.defaultDialog(
title: "Welcome to Flutter Dev'S",
middleText: "FlutterDevs is a protruding flutter app development company with "
"an extensive in-house team of 30+ seasoned professionals who know "
"exactly what you need to strengthen your business across various dimensions",
backgroundColor: Colors.teal,
titleStyle: TextStyle(color: Colors.white),
middleTextStyle: TextStyle(color: Colors.white),
radius: 30
);
},
),
],
)),
);
}
}
Conclusion:
In the article, I have explained the basic structure of the Dialog Using GetX in a flutter; you can modify this code according to your choice. This was a small introduction to Dialog Using GetX On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Dialog Using GetX in your flutter projects. We will show you what the Introduction is?. Make a demo program for working Dialog Using GetX plugins. In this blog, we have examined the Dialog Using GetX of the flutter app. I hope this blog will help you in the comprehension of the Dialog in a better way. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
