一、状态管理、Flutter Getx介绍

通俗的讲： 当我们想在多个页面（组件/Widget）之间共享状态（数据），或者一个页面（组件/Widget）中的多个子组件之间共享状态（数据），这个时候我们就可以用Flutter中的状态管理来管理统一的状态（数据），实现不同组件之间的传值和数据共享。现在Flutter的状态管理方案很多，redux、bloc、state、provider、Getx。provider是官方提供的状态管理解决方案，主要功能就是状态管理。Getx是第三方的状态管理插件，不仅具有状态管理的功能，还具有路由管理、主题管理、国际化多语言管理、Obx局部更新、网络请求、数据验证等功能，相比其他状态管理插件Getx 简单、功能强大并且高性能。

二、Flutter Getx介绍

GetX 是 Flutter 上的一个轻量且强大的解决方案，Getx为我们提供了高性能的状态管理、智能的依赖注入和便捷的路由管理。

2.1、GetX 有3个基本原则：

• 性能： GetX 专注于性能和最小资源消耗。GetX 打包后的apk占用大小和运行时的内存占用 与其他状态管理插件不相上下。

• 效率： GetX 的语法非常简捷，并保持了极高的性能，能极大缩短你的开发时长。

• 结构： GetX 可以将界面、逻辑、依赖和路由完全解耦，用起来更清爽，逻辑更清晰，代码更容易维护

• Getx有一个庞大的生态系统，能够在Android、iOS、Web、Mac、Linux、Windows和你的服务器上用同样的代码运行。 通过Get Server 可以在你的后端完全重用你在前端写的代码。

  GetX 并不臃肿，却很轻量。如果你只使用状态管理，只有状态管理模块会被编译，其他没用到的东西都不会被编译

官网：https://pub.dev/packages/get
中文文档：https://github.com/jonataslaw/getx/blob/master/README.zh-cn.md

三、Flutter Getx 中的Dialog 以及改变主题

3.1、Getx安装

dependencies: get: ^4.6.5

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

import 'package:get/get.dart';

3.2、 Getx 使用 Dialog

一、设置应用程序入口

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"))
      ],),),),);
  }
}

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属性和说明