Flutter插件Get（5）：小组件.md

一 概述

在 GetX 中，无需 context 上下文，便可使用 SmallWidget 小组件：

• SnackBars 提示信息
• Dialog 对话框
• BottomSheets 底部弹窗

先看下效果图：

二、SnackBars（提示信息）

GetX 创建一个 SnackBars 代码如下：

Get.snackbar('SnackBar', '我是SnackBar');

OK，就这么一行代码，我们就轻松的实现了 SnackBar。再看看对应的原生写法：

final snackBar = SnackBar(
  content: Text('SnackBar'),
  action: SnackBarAction(
    label: '我是SnackBar',
    onPressed: (){}
  ),
);

//用Flutter创建一个简单的SnackBar，你必须获得Scaffold的context，或者你必须使用一个GlobalKey附加到你的Scaffold上。
Scaffold.of(context).showSnackBar(snackBar);

这么一对比，看看 Getx 提高了多少效率。看下示例：

// SnackBars
ElevatedButton(
	onPressed: () async {
	Get.snackbar('SnackBar', '我是SnackBar'); // toNamed方法带参数实现页面跳转
	},
	child: const Text("免SnackBars导航")),

三、Dialog（对话框）

同样我们使用 defaultDialog 和 dialog 也不需要 context。仅仅需要一行代码即可。

打开自定义 Dialogs：

Get.dialog(YourDialogWidget());

打开默认 Dialogs 代码如下：

Get.defaultDialog(
	onConfirm: () => debugPrint("Ok"),
	middleText: "我是Dialog",
);

四、BottomSheets（底部弹窗）

Get.bottomSheet 类似于 showModalBottomSheet，但不需要 context：

Get.bottomSheet(Container(
  child: Wrap(
    children: [
      ListTile(
        leading: const Icon(Icons.wb_sunny_outlined),
        title: const Text("白天模式"),
        onTap: () {
          // 改变主题模式(白天模式还是夜晚模式)
          // Get.isDarkMode用来判断是否是夜晚模式
          Get.changeTheme(ThemeData.light());
        },
      ),
      ListTile(
        leading: const Icon(Icons.wb_sunny),
        title: const Text("黑夜模式"),
        onTap: () {
          // 改变主题模式(白天模式还是夜晚模式)
          Get.changeTheme(ThemeData.dark());
        },
      )
    ],
  ),
));

五、全部代码

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          appBarTheme: const AppBarTheme(
            centerTitle: true,
          )),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // SnackBars
          ElevatedButton(
              onPressed: () async {
                Get.snackbar('SnackBar', '我是SnackBar'); // toNamed方法带参数实现页面跳转
              },
              child: const Text("免SnackBars导航")),
          const SizedBox(height: 16),
          // Dialogs
          ElevatedButton(
              onPressed: () async {
                Get.snackbar('Dialogs', '我是Dialogs'); // toNamed方法带参数实现页面跳转
              },
              child: const Text("免Dialogs导航")),
          const SizedBox(height: 16),
          // Dialogs
          ElevatedButton(
              onPressed: () {
                Get.bottomSheet(Container(
                  child: Wrap(
                    children: [
                      ListTile(
                        leading: const Icon(Icons.wb_sunny_outlined),
                        title: const Text("白天模式"),
                        onTap: () {
                          // 改变主题模式(白天模式还是夜晚模式)
                          // Get.isDarkMode用来判断是否是夜晚模式
                          Get.changeTheme(ThemeData.light());
                        },
                      ),
                      ListTile(
                        leading: const Icon(Icons.wb_sunny),
                        title: const Text("黑夜模式"),
                        onTap: () {
                          // 改变主题模式(白天模式还是夜晚模式)
                          Get.changeTheme(ThemeData.dark());
                        },
                      )
                    ],
                  ),
                ));
              },
              child: const Text("免BottomSheets导航")),
        ],
      ),
    );
  }
}