保存主题 (Flutter/Dart)

Question

早上好，在这里，我有两个按钮可以更改我的应用程序的主题（浅色和深色）。当我重新加载我的应用程序时，主题不是我最后选择的主题。我希望应用程序备份本地使用的最后一个主题。您可能只需要保存一个数字，指示哪个主题使用了最后一个。 . .但是我完全不知道该怎么做？

代码如下：main.dart

import 'package:flutter/material.dart';
import 'package:animated_splash_screen/animated_splash_screen.dart';
import 'package:watch/nav.dart';
import 'package:page_transition/page_transition.dart';

import 'package:watch/blocs/theme.dart';
import 'package:provider/provider.dart';


void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<ThemeChanger>(
      builder: (_) => ThemeChanger(ThemeData.dark()),
      child: MaterialAppWithTheme(),
    );
  }
}

class MaterialAppWithTheme extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = Provider.of<ThemeChanger>(context);
    return MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: theme.getTheme(),

    home: AnimatedSplashScreen(
      duration: 3000,
        splash: "",
        splashTransition: SplashTransition.slideTransition,
        pageTransitionType: PageTransitionType.downToUp,
        nextScreen: Nav(),
    ),
    );
  }
}

settings.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:watch/blocs/theme.dart';
import 'package:watch/constants.dart';

class Parametres extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ThemeChanger _themeChanger = Provider.of<ThemeChanger>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Paramètres', style: kAppBarStyle,), 
        elevation: 0,
        automaticallyImplyLeading: false,
        leading: GestureDetector(
          onTap: () {
            Navigator.pop(context);
          },
          child: Icon(
            Icons.arrow_back,
          ),
        ),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            FlatButton(
              onPressed: () => _themeChanger.setTheme(
                ThemeData(                 
                  bottomNavigationBarTheme: bNavBar,
                  scaffoldBackgroundColor: kBlackMedium,
                  brightness: Brightness.dark,
                  iconTheme: bIcons,
                )), 
              child: Text('Dark Theme')),
            FlatButton(
              onPressed: () => _themeChanger.setTheme(
                ThemeData(
                  bottomNavigationBarTheme: lNavBar,
                  scaffoldBackgroundColor: Colors.white,
                  brightness: Brightness.light,
                  iconTheme: lIcons,
                  primaryColor: kWhite,
                )), 
              child: Text('Light Theme')),
          ],
        ),
      ),
    );
  }
}

谢谢

Answer 1

使用Shared Preference package，你可以将简单的值存储为密钥对values.Load初始屏幕初始化中的数据，以便你可以根据主题显示屏幕

Answer 2

您应该使用本地内存来保存主题。

您可以使用共享 preference 或 hive db 或 sqflite 或其他数据库系统。

关于更改主题，您可以使用 Cubit、Bloc、Provider 等，甚至可以使用 ValueNotifier。

但是你应该用“你的状态管理小部件”包装你的 MaterialApp 或 CupertinoApp

并添加一些逻辑

或者你可以使用一些库 Library to change theme

Answer 3

共享偏好是最好的选择。因为我不知道你的 ThemeChanger class 我先在这里添加我的主题 class:

class MyThemeModel extends ChangeNotifier{
  ThemeData _themedata;

  MyThemeModel(bool isActive){
    if(isActive == null){
      getThemeData;
    }
    else{
      if(isActive){
        _themedata = sleepTheme;
      }
      else{
        _themedata = morningTheme;
      }
    }

  }

  ThemeData get getThemeData => _themedata;

  void setThemeData(ThemeData data){
    _themedata = data;
    notifyListeners();
  }
}

在main.dart

void main() async{
  var isSleepActive;
  if(SharedPrefHelper.prefInstance.checkContains(SharedPrefKeys.ISMORNING)){
    isSleepActive = SharedPrefHelper.prefInstance.getBool(SharedPrefKeys.ISMORNING);
  }
  else{
    isSleepActive = false;
  }
  runApp(MultiProvider(
      providers: [
        ChangeNotifierProvider(
          builder: (context) => MyThemeModel(isSleepActive),
        )
      ],
    child: MyApp(),
    )
  );
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: Provider.of<MyThemeModel>(context).getThemeData,
      title: 'Theme App',
      home: AnimatedSplashScreen(
       duration: 3000,
       splash: "",
       splashTransition: SplashTransition.slideTransition,
       pageTransitionType: PageTransitionType.downToUp,
       nextScreen: Nav(),
),
      debugShowCheckedModeBanner: false,
    );
  }

为了使用平面按钮更改主题：

FlatButton(
              onPressed: () => myThemeModel.setThemeData(
                ThemeData(
                  bottomNavigationBarTheme: lNavBar,
                  scaffoldBackgroundColor: Colors.white,
                  brightness: Brightness.light,
                  iconTheme: lIcons,
                  primaryColor: kWhite,
                )), 
              child: Text('Light Theme')),

保存主题 (Flutter/Dart)

Save a theme (Flutter/Dart)

themes

save

dart

flutter