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

Dialog弹框

Dialog属性和说明

调用defaultDialog

class GetxPage extends StatefulWidget {
  const GetxPage({super.key});

  @override
  State<GetxPage> createState() => _GetxPageState();
}

class _GetxPageState extends State<GetxPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          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("Getx defaultDialog")),
        ],
      ),
    );
  }
}

snackbar提示信息

Snackbar属性和说明

调用snackbar

Snackbar 和我们前面讲的toast有点相似， 如果想在应用程序中触发某些特定的事件后，需要弹出快

捷消息，那么使用 Snackbar 则是最佳的选择。

ElevatedButton(
   onPressed: () {
   Get.snackbar("Snackbar 标题", "欢迎使用Snackbar");
    },
 child: const Text("Getx snackbar")),

BottomSheet 改变主题

BottomSheet属性和说明

调用snackbar

我们可以通过 GetX 很轻松的调用 bottomSheet() ，而且无需传入 context ，下面我给出一个例子，

使用 GetX 弹出 bottomSheet 并很轻松的实现切换主题 。

我们可以通过 Get.bottomSheet() 来显示 BottomSheet ，通过 Get.back() 实现路由返回，通过

Get.changeTheme(ThemeData.dark()) 切换皮肤主题，通过Get.isDarkMode判断主题样式。

class GetxPage extends StatefulWidget {
  const GetxPage({super.key});

  @override
  State<GetxPage> createState() => _GetxPageState();
}

class _GetxPageState extends State<GetxPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          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();
                          print("切换主题为白天模式");
                        },
                      ),
                      // 晚上模式列表项
                      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();
                          print("切换主题为晚上模式");
                        },
                      )
                    ],
                  ),
                ));
              },
              child: const Text("使用 Getx.bottomSheet 切换主题")),
          Text("这是一个字"),
        ],
      ),
    );
  }
}