image.png

image.png

目錄

• 多語言實(shí)現(xiàn)
• 多主題實(shí)現(xiàn)
• 狀態(tài)管理
• 切換多語言
• 切換多主題

多語言實(shí)現(xiàn)

1. AndroidStudio-> File -> Settings -> Plugins -> 安裝 Flutter Inrl

image.png

2. AndroidStudio -> Tools -> Flutter Intl -> Initialize for the Project

會(huì)在項(xiàng)目里面生成 generated磁滚、l10n 文件茬末。

image.png

3.AndroidStudio -> Tools -> Flutter Intl -> Add Locale (添加需要的語言)

image.png

4. 編寫多語言

在 文件夾 l10n的 intl_en.arb彰触，添加英文版變量;
在 文件夾 l10n的 intl_zh_CN.arb江滨，添加中文版變量;

image.png

5. 使用

配置
localizationsDelegates: const [
S.delegate,
GlobalMaterialLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
GlobalWidgetsLocalizations.delegate
],
supportedLocales: S.delegate.supportedLocales,
locale: currentLocale.value,
調(diào)用
S.of(context).testName

多主題

多主題的實(shí)現(xiàn)和多語言的思想一樣钾恢，一對多的形式實(shí)現(xiàn)掸宛。
我沒有采用 基于框架的ThemeData 進(jìn)行編寫你弦，涉及到的顏色變量較少盲厌，直接 寫個(gè)實(shí)體類進(jìn)行開展。

1. 編寫一個(gè) 主題實(shí)體類

//主題枚舉
enum AppThemeEnum { defaultTheme, blackTheme }

//主題實(shí)體類
class ThemeBean {
  //主題色
  Color primaryColor;

  //title 淺標(biāo)題顏色
  Color titleLightColor;

  //title 深顏色
  Color titleBlackColor;

  //主背景色
  Color mainBgColor;

  //二級(jí)背景色
  Color secondLevelMainBgColor;

  //未選中顏色
  Color unselectedWidgetColor;

  //選中顏色
  Color activeColor;

  //下劃線顏色
  Color underlineColor;

  //底部導(dǎo)航欄顏色
  Color systemNavigationBarColor;

  Color secondLevelTitleColor;

  ThemeBean(
      this.primaryColor,
      this.titleLightColor,
      this.titleBlackColor,
      this.mainBgColor,
      this.unselectedWidgetColor,
      this.activeColor,
      this.underlineColor,
      this.systemNavigationBarColor,
      this.secondLevelTitleColor,
      this.secondLevelMainBgColor
      );
}

2. 聲明兩種主題

//默認(rèn)主題
ThemeBean defaultTheme = ThemeBean(
    //主題色
    Colors.blue,
    //主標(biāo)題淺色
    Colors.white,
    //主標(biāo)題深色
    Color(0xff333333),
    //主背景色
    Colors.white,
    //未選中顏色
    Colors.grey,
    //選中顏色
    Colors.blue,
    //下劃線顏色
    Color(0xffe6e6e6),
    //底部導(dǎo)航欄顏色
    Color(0xfff2f2f2),
    //二級(jí)標(biāo)題顏色
    Color(0xff666666),
    //二級(jí)背景色
    Color(0xffffffff));


//暗黑主題
ThemeBean blackTheme = ThemeBean(
    //主題色
    Color(0xff111111),
    //主標(biāo)題淺色
    Colors.white,
    //主標(biāo)題深色
    Colors.white,
    //主背景色
    Color(0xff111111),
    //未選中顏色
    Color(0xff2c2c2c),
    //選中顏色
    Color(0xff2c2c2c),
    //下劃線顏色
    Color(0xff3b3b3b),
    //底部導(dǎo)航欄顏色
    Color(0xff010101),
    //二級(jí)標(biāo)題顏色
    Color(0xff979797),
    //二級(jí)背景色
    Color(0xff424242));

3.編寫獲取方法

//主題數(shù)組
Map<AppThemeEnum, ThemeBean> themeMap = {
  AppThemeEnum.defaultTheme: defaultTheme,
  AppThemeEnum.blackTheme: blackTheme
};

//獲取顏色
ThemeBean get themeColor => themeMap[
    Provider.of<CurrentTheme>(navigatorKey.currentState.overlay.context)
        .getThisThemeColor];

4. 使用

  themeColor.secondLevelMainBgColor

狀態(tài)管理

使用Provider 進(jìn)行狀態(tài)管理臭脓、同步酗钞。

///多語言
class CurrentLocale with ChangeNotifier
{
  Locale _locale = const Locale('zh','CN');

  Locale get value => _locale;
  void setLocale(locale)
  {
    _locale = locale;
    notifyListeners();
  }
}

///多主題
class CurrentTheme extends ChangeNotifier{
  //當(dāng)前主題
  AppThemeEnum _nowAppTheme = AppThemeEnum.defaultTheme;

  AppThemeEnum get getThisThemeColor => _nowAppTheme;

  setTheme(AppThemeEnum themeColor) {
    _nowAppTheme = themeColor;
    notifyListeners();
  }

}

  runApp(MultiProvider(
    providers: [
      ChangeNotifierProvider(create: (context) => CurrentLocale()),
      ChangeNotifierProvider(create: (context) => CurrentTheme())
      //此是語言狀態(tài)注冊
    ],
    child: MyApp(),
  ));

class MyApp extends StatelessWidget {
  Color _themeColor;

  @override
  Widget build(BuildContext context) {
    return Consumer<CurrentLocale>(builder: (context, currentLocale, child) {
      return Consumer<CurrentTheme>(
          builder: (context, themeColor, child) {
            if (themeMap[themeColor.getThisThemeColor] != null) {
              _themeColor =
                  themeMap[themeColor.getThisThemeColor].primaryColor;
            }
            Future.delayed(Duration(milliseconds: 100), () {
              SystemUiOverlayStyle systemUiOverlayStyle =
              SystemUiOverlayStyle(
                systemNavigationBarColor:
                themeMap[themeColor.getThisThemeColor]
                    .systemNavigationBarColor, //虛擬按鍵背景色
              );
              SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
            });

            return MaterialApp(
              navigatorKey: navigatorKey,
              title: '多主題多語言',
              theme: ThemeData(
                  fontFamily: "hk",
                  primaryColor: _themeColor,
                  floatingActionButtonTheme: FloatingActionButtonThemeData(
                      backgroundColor: _themeColor),
                  bottomAppBarColor: _themeColor),
              // home: Splash()),
              home: Home(),
              localizationsDelegates: const [
                S.delegate,
                GlobalMaterialLocalizations.delegate,
                GlobalCupertinoLocalizations.delegate,
                GlobalWidgetsLocalizations.delegate
              ],
              supportedLocales: S.delegate.supportedLocales,
              locale: currentLocale.value,
              localeListResolutionCallback: (locales, supportedLocales) {
                return;
              },
            );
          });
    });
  }
}

切換多語言

S.load(Locale("zh", "CN"));
Provider.of<CurrentLocale>(context,listen: false)
.setLocale(const Locale('zh', "CH"));

切換多主題

Provider.of<CurrentTheme>(context, listen: false)
.setTheme(AppThemeEnum.defaultTheme);