Flutter Getx Dialog 的使用

Flutter Getx 对应视频教程访问：https://www.itying.com/goods-1176.html

一 、 Getx安装

将 Get 添加到你的 pubspec.yaml 文件中。

dependencies:
  get: ^4.6.5

在需要用到的文件中导入，它将被使用。

import 'package:get/get.dart';

二、 Getx 使用 Dialog

一、设置应用程序入口

当我们导入依赖后，在应用程序顶层把GetMaterialApp 作为顶层，如下所示

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: "GetX",
      home: Scaffold(
        appBar: AppBar(title: Text("GetX Title"),),
      ),
    );
  }
}

二、调用BottomSheet 以及改变主题

我们可以通过GetX很轻松的调用bottomSheet()，而且无需传入context，下面我给出一个例子，使用GetX弹出bottomSheet并很轻松的实现切换主题 。

我们可以通过Get.bottomSheet() 来显示 BottomSheet ，通过Get.back()实现路由返回，通过Get.changeTheme(ThemeData.dark())切换皮肤主题，通过Get.isDarkMode判断主题样式。

ElevatedButton(
                onPressed: () {
                  Get.bottomSheet(Container(
                    color: Get.isDarkMode ? Colors.black12 : Colors.white,
                    height: 200,
                    child: Column(
                      children: [
                        ListTile(
                          leading: Icon(Icons.wb_sunny_outlined,
                              color:
                                  Get.isDarkMode ? Colors.white : Colors.black),
                          title: Text("白天模式",
                              style: TextStyle(
                                  color: Get.isDarkMode
                                      ? Colors.white
                                      : Colors.black)),
                          onTap: () {
                            Get.changeTheme(ThemeData.light());
                            Get.back();
                          },
                        ),
                        ListTile(
                          leading: Icon(Icons.wb_sunny,
                              color:
                                  Get.isDarkMode ? Colors.white : Colors.black),
                          title: Text("黑夜模式",
                              style: TextStyle(
                                  color: Get.isDarkMode
                                      ? Colors.white
                                      : Colors.black)),
                          onTap: () {
                            Get.changeTheme(ThemeData.dark());
                            Get.back();
                          },
                        )
                      ],
                    ),
                  ));
                },
                child: const Text("Show BottomSheet"))

BottomSheet属性和说明

三、调用snackbar

Snackbar和我们前面讲的toast有点相似， 如果想在应用程序中触发某些特定的事件后，需要弹出快捷消息，那么使用Snackbar则是最佳的选择。

我们可以通过Get.snackbar() 来显示 snackbar ，如下所示

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: "GetX",
      home: Scaffold(
        appBar: AppBar(
          title: Text("GetX Title"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  Get.snackbar("Snackbar 标题", "欢迎使用Snackbar");
                },
                child: Text("显示 Snackbar"))
            ],
          ),
        ),
      ),
    );
  }
}

如果您运行了代码，那么恭喜你，你已经会用GetX 来展示snackbar 了。你将得到下面的结果

Snackbar属性和说明

四、调用defaultDialog

ElevatedButton(
                onPressed: () {
                  Get.defaultDialog(
                      title: "提示",
                      middleText: "您确定退出登录？",
                      confirm: ElevatedButton(
                          onPressed: () {
                            print("确定");
                            Get.back();
                          },
                          child: const Text("确定")),
                      cancel: ElevatedButton(
                          onPressed: () {
                            print("取消");
                            Get.back();
                          },
                          child: const Text("取消")));
                },
                child: const Text("显示默认的Dialog"))

Dialog属性和说明