Flutter Getx changeTheme改变主题

发布于 1 年前 作者 phonegap100 609 次浏览 最后一次编辑是 1 年前 来自 分享

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

Flutter Getx改变主题, 我们可以通过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属性和说明

字段 属性 描述
bottomsheet Widget 弹出的Widget组件
backgroundColor Color bottomsheet的背景颜色
elevation double bottomsheet的阴影
persistent bool 是否添加到路由中
shape ShapeBorder 边框形状,一般用于圆角效果
clipBehavior Clip 裁剪的方式
barrierColor Color 弹出层的背景颜色
ignoreSafeArea bool 是否忽略安全适配
isScrollControlled bool 是否支持全屏弹出,默认false
useRootNavigator bool 是否使用根导航
isDismissible bool 点击背景是否可关闭,默认ture
enableDrag bool 是否可以拖动关闭,默认true
settings RouteSettings 路由设置
enterBottomSheetDuration Duration bottomsheet进入时的动画时间
exitBottomSheetDuration Duration bottomsheet退出时的动画时间
回到顶部