在 Flutter 使用 GetX 對話方塊

独立开发者_猫哥發表於2022-03-28
Flutter

在 Flutter 使用 GetX 對話方塊

原文

https://medium.flutterdevs.co...

參考

正文

瞭解如何在您的 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 的對話方塊。我希望這個部落格能幫助你更好地理解這個對話方塊。所以請嘗試一下。

© 貓哥

訂閱號

相關文章