Using GetX Dialogs in Flutter
original
refer to
text
Learn how to use GetX to create a dialog in your Flutter app
Using GetX Dialogs in Flutter
is a fundamental part of a mobile application. They help deliver warnings and important information, as well as do specific activities. When a Flutter developer makes a dialog in Flutter, it makes a dialog with context and generators. However, it is not appropriate for developers to cultivate Dialogs with contexts and builders.
In this article, we'll explore using GetX's dialogs in Flutter. We'll also implement a demo and see how to create a dialog using your Flutter app's fetch package.
Get | Flutter Package
GetX is a super light and powerful solution for Flutter. It combines high-performance state management, intelligent..
Introduction:
Introduction:
When we need to display any form-like content, we can create this dialog, which involves Flutter's GetX library. We can make dialogs using GetX's code base and make a dialog very simply. It doesn't take advantage of contexts and generators to create dialogs.
is an additional lightweight strong solution to the Flutter problem. It joins elite performance state management, intelligent dependency injection management, and routing management.
Demo module:
This demo video shows how to create a dialog in Flutter and shows how to use the get package in your Flutter app to work and use the different properties. It will show up on your device.
Constructor:
To use Get.defaultDialog(), call the following constructor:
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():
- > title : This property is used for the title of the dialog. By default, the title is "Alert".
- > titleStyle: 此属性用于使用 TextStyle 给标题文本赋予的样式。
- > content: 在这个属性中用于给出对话框的内容，并且应该使用 Widget 给出内容。
- > middleText: 此属性用于对话框的中间文本。如果我们也利用内容，那么内容小部件数据将被播种。
- > barrierDismissible: 如果我们想通过单击对话框外部来关闭对话框，那么这个属性的值应该为 true else false。默认情况下，它的值为 true。
- > middleTextStyle: 此属性用于使用 TextStyle 给中间文本赋予的样式。
- > radius: 在此属性中使用的是提供的对话框的半径。默认情况下，它的值为 20。
- > backgroundColor: 在这个属性中用作对话框的背景颜色。
Implementation:
- 第一步: 添加依赖项
将依赖项添加到 pubspec ー yaml 文件。
dependencies:
flutter:
sdk: flutter
get: ^4.6.1
复制代码- 第二步: 导入
import 'package:get/get.dart';
复制代码- 第三步: 在应用程序的根目录中运行 flutter 软件包。
如何实现 dart 文件中的代码:
你需要分别在你的代码中实现它:
在 lib 文件夹中创建一个名为 main.dart 的新 dart 文件。
我们使用了 GetMaterialApp 而不是 MaterialApp，因为我们正在使用 GetX 库构建应用程序。如果我们不利用 GetMaterialApp，那么，在这一点上，它的功能将不工作。
return GetMaterialApp(
title: 'Dialog Demo',
theme: ThemeData(
primarySwatch: Colors._blue_,
),
home: Splash(),
debugShowCheckedModeBanner: false,
);
复制代码我们将在 main.dart 文件中创建一个 Home 类
In the body, we'll add a Center widget. In this widget, we will add a Column widget with the mainAxisAlignment in the center. We're going to add a few things, first, we'll add an image, and second, we'll add a facade button with child properties and style properties. In the onPressed function, we'll add Get.defaultDialog(). We'll describe it in depth 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 should get the output of the screen like the screenshot below.
Home Screen
Now, we'll describe Get.defaultDialog() in depth:
Now you see how easy it is to use GetX in Flutter to get conversations with very few lines. You can also customize it with different options provided by GetX. We will add the title, middle text, background color, title style, middle text style 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 should get the output of the screen like the screenshot below.
Final Output Final output
Full code:
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 this article, I've explained the basic structure of a dialog using GetX; you can modify this code according to your choice. Here's my small introduction to dialogs for user interaction with GetX, working with Flutter.
I hope this blog will give you enough information to try using GetX dialogs in your Flutter project. We'll show you what an introduction is? .Use the GetX plug-in to make a demo program of a working dialog. In this blog, we have looked at dialogs for flutter applications using GetX. I hope this blog helps you understand this dialog better. So please try it.
© Cat Brother
-
WeChat ducafecat