Flutter Getx changeTheme改变主题
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退出时的动画时间 |