首页 > 解决方案 > 自定义暗光主题共享首选项应用栏和底部导航。酒吧。不能在颤振中工作

问题描述

我在我的应用程序中添加了夜间模式。我为底部导航栏和模组的其他区域设置了主题颜色。模式切换工作正常,但是当我关闭并打开应用程序时,背景变成黑色,导航栏恢复到原来的颜色。在模拟器上运行时不会出现这些问题。

主题色类:

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

标签: flutterdartprovider

解决方案


推荐阅读