flutter - 自定义暗光主题共享首选项应用栏和底部导航。酒吧。不能在颤振中工作
问题描述
我在我的应用程序中添加了夜间模式。我为底部导航栏和模组的其他区域设置了主题颜色。模式切换工作正常,但是当我关闭并打开应用程序时,背景变成黑色,导航栏恢复到原来的颜色。在模拟器上运行时不会出现这些问题。
主题色类:
ThemeData light = ThemeData(brightness: Brightness.light);
ThemeData lightTheme = light.copyWith(
primaryColor: kPrimaryColor,
scaffoldBackgroundColor: Colors.white70,
appBarTheme: AppBarTheme(color: kPrimaryColor, elevation: 2),
visualDensity: VisualDensity.adaptivePlatformDensity,
iconTheme: IconThemeData(color: kContentColorLightTheme),
colorScheme: ColorScheme.light(
primary: kPrimaryColor,
secondary: kSecondaryColor,
error: kErrorColor,
),
bottomNavigationBarTheme: BottomNavigationBarThemeData(
backgroundColor: kContentColorLightTheme1,
selectedItemColor: kPrimaryColor,
unselectedItemColor: kContentColorLightTheme.withOpacity(0.32),
selectedIconTheme: IconThemeData(color: kPrimaryColor),
showUnselectedLabels: true,
),
);
ThemeData dark = ThemeData(brightness: Brightness.dark);
ThemeData darkTheme = dark.copyWith(
scaffoldBackgroundColor: kContentColorDarkTheme,
visualDensity: VisualDensity.adaptivePlatformDensity,
appBarTheme: AppBarTheme(color: kDarkColor, elevation: 2),
iconTheme: IconThemeData(color: kContentColorLightTheme),
colorScheme: ColorScheme.dark().copyWith(
primary: kPrimaryColor,
secondary: kSecondaryColor,
error: kErrorColor,
),
bottomNavigationBarTheme: BottomNavigationBarThemeData(
backgroundColor: kDarkColor,
selectedItemColor: Colors.white70,
unselectedItemColor: kContentColorDarkTheme.withOpacity(0.32),
selectedIconTheme: IconThemeData(color: Colors.white),
unselectedIconTheme: IconThemeData(color: Colors.grey),
showUnselectedLabels: true,
),
);
class ThemeColorData with ChangeNotifier {
static SharedPreferences? _sharedPreferences;
bool _isLight = true;
bool get isLight => _isLight;
ThemeData get themeColor => _isLight ? lightTheme : darkTheme;
void switchTheme(bool value) {
_isLight = value;
saveTheme(value);
notifyListeners();
}
Color get colorBackground => _isLight ? Colors.white : kDarkColor;
Future<void> createSharedPrefObject() async {
_sharedPreferences = await SharedPreferences.getInstance();
}
void saveTheme(bool value) async {
_sharedPreferences!.setBool('themeData', value);
}
void loadTheme() async {
await createSharedPrefObject();
_isLight = _sharedPreferences!.getBool('themeData') ?? true;
}
}
利用:
SwitchListTile(
activeColor: kPrimaryColor,
title:
_themeColorData ? Text('Açık Tema') : Text('Koyu Tema'),
value: Provider.of<ThemeColorData>(context).isLight,
onChanged: (bool value) {
Provider.of<ThemeColorData>(context, listen: false)
.switchTheme(value);
},
),
底部导航栏:
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(),
BottomNavigationBarItem(),
BottomNavigationBarItem()
],
currentIndex: _selectedIndex,
unselectedItemColor: Colors.grey.shade500,
onTap: _onItemTapped,
)
主类:
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await ThemeColorData().createSharedPrefObject();
runApp(ChangeNotifierProvider<ThemeColorData>(
create: (BuildContext context) => ThemeColorData(), child: MyApp()));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
Provider.of<ThemeColorData>(context, listen: false).loadTheme();
ThemeData themeColor = Provider.of<ThemeColorData>(context).themeColor;
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: themeColor,
home: SplashScreen(),
);
}
}
错误的屏幕代码: 当我在这里使用它时,当我在夜间模式下启动应用程序时,屏幕被漆成黑色,文字留在底部。
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
bool _isLight = Provider.of<ThemeColorData>(context).isLight;
return SafeArea(
child: Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(),
];
},
body: Container(
width: size.width,
height: size.height,
decoration: BoxDecoration(
color: _isLight ? Colors.white : kContentColorDarkTheme,
),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5.0),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 7),
Align(),
SizedBox(height: 10),
SelectableText(
widget.dataModel.title,
style: Theme.of(context).textTheme.headline6!.copyWith(
fontFamily: 'Muli', fontWeight: FontWeight.w600),
),
SizedBox(height: 10),
SelectableText(
widget.dataModel.longDescription,
style: TextStyle(
height: 1.3,
fontSize: 18,
fontFamily: 'Muli',
fontWeight: FontWeight.w300),
),
SizedBox(height: 10.0),
],
),
),
),
),
),
),
);
}
解决方案
推荐阅读
- javascript - 使用视口缩放 div 位置
- android - Android 如何在六边形内绘制三角形?
- cmake - cmake 在 Linux 中搜索库的默认文件夹是什么?
- javascript - 从函数中获取价值
- python - Little logic issue with Panda duplicates on python
- iis - Session expiring at random dotnet core 3.1
- r - 在R中提取一列前n个值作为一个长度字符
- react-native - 使用 react-native-firebase/auth OAuth 提供程序对 Azure AD 凭据进行身份验证
- swift - 尝试读取 fetchrequest<> 时出现运行时错误
- pine-script - pine script percent trailing stop since trade entry