在 Flutter 应用 GetX 对话框
原文
https://medium.flutterdevs.co...
参考
- https://pub.dev/packages/get
注释
理解如何在您的 Flutter 应用程序应用 GetX 创立一个对话框
在 Flutter 应用 GetX 对话框
是挪动应用程序的根本组成部分。他们帮忙传递正告和重要信息，以及做具体的流动。当 Flutter 开发人员在 Flutter 制作一个对话框时，它利用上下文和生成器制作一个对话框。然而，对于开发人员来说，利用上下文和构建器来造就 Dialogs 是不适合的。
在本文中，咱们将摸索在 Flutter 应用 GetX 的对话框。咱们还将实现一个演示程序，并理解如何应用您的 Flutter 应用程序的获取包创立对话框。
获取 | Flutter Package
GetX 是一个超轻和弱小的解决方案 Flutter 。它联合了高性能的状态治理，智能..
https://pub.dev/packages/get
Introduction:
简介:
当咱们须要显示任何相似表单的内容时，咱们能够创立这个对话框，它波及 Flutter 的 GetX 库。咱们能够使对话框利用 GetX 的根本代码和非常简单的使一个对话框。它没有利用上下文和生成器来创立对话框。
是 Flutter 问题的附加轻量强解。它退出了精英的性能状态治理、智能依赖注入治理和路由治理。
演示模块:
这个演示视频展现了如何在 Flutter 中创立一个对话框，并展现了如何应用您的 Flutter 应用程序中的 get 包来工作，以及应用不同的属性。它会显示在你的设施上。
Constructor:
要应用 Get.defaultDialog () ，须要调用上面的构造函数:
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:
有一些 Get.defaultDialog ()的属性:
- > title: 此属性用于对话框的题目。默认状况下，题目为“ 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 类
在注释中，咱们将增加一个 Center 小部件。在这个小部件中，咱们将增加一个 Column 小部件，该小部件的核心是 mainAxisAlignment。咱们将增加一些货色，首先，咱们将增加一个图像，其次，咱们将增加一个带有子属性和款式属性的立面按钮。在 onPressed 函数中，咱们将增加 Get.defaultDialog ()。咱们将在上面深刻形容它。
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(); }, ), ], )),当咱们运行应用程序时，咱们应该失去屏幕的输入，就像上面的屏幕截图一样。
Home Screen 主屏幕
当初，咱们将深刻形容 Get.defaultDialog () :
当初您看到了在 Flutter 应用 GetX 取得只有很少行的对话是如许容易。您还能够应用 GetX 提供的不同选项对其进行自定义。咱们将增加题目，两头文本，背景色彩，题目款式，两头文本款式和半径。
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);当咱们运行应用程序时，咱们应该失去屏幕的输入，就像上面的屏幕截图一样。
Final Output 最终输入
全副代码:
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 ); }, ), ], )), ); }}结语:
在本文中，我曾经解释了应用 GetX 的对话框的根本构造; 您能够依据本人的抉择批改这段代码。这是我对应用 GetX 进行用户交互的对话框的一个小小介绍，它正在应用 Flutter 工作。
我心愿这个博客将提供您充沛的信息，尝试在您的 Flutter 我的项目应用 GetX 对话框。咱们将向您展现介绍是什么？.应用 GetX 插件制作一个工作对话框的演示程序。在本博客中，咱们曾经钻研了 flutter 应用程序的应用 GetX 的对话框。我心愿这个博客能帮忙你更好地了解这个对话框。所以请尝试一下。
© 猫哥
- 微信 ducafecat
- 博客 ducafecat.tech
- github
- bilibili