保存主題（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(),
    ),
    );
  }
}

設置.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 包，您可以在那里將簡單值存儲為鍵對值。在初始屏幕的 init 中加載該數據，以便您可以根據主題顯示屏幕

Answer 2

您應該使用本地內存來保存主題。

您可以使用共享首選項或hive db 或sqflite或其他數據庫系統。

關於更改主題，您可以使用 Cubit、Bloc、Provider 等，甚至可以使用 ValueNotifier。

但是，您應該使用“您的狀態管理小部件”包裝 MaterialApp 或 CupertinoApp

並添加一些邏輯

或者您可以使用一些庫庫來更改主題

Answer 3

共享偏好是它的最佳選擇。 因為我不知道你的 ThemeChanger 類，所以我先在這里添加我的主題類：

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')),