image.png
image.png

目录

• 多语言实现
• 多主题实现
• 状态管理
• 切换多语言
• 切换多主题

多语言实现

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

image.png

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

会在项目里面生成 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,
调用
S.of(context).testName

多主题

多主题的实现和多语言的思想一样，一对多的形式实现。
我没有采用 基于框架的ThemeData 进行编写，涉及到的颜色变量较少，直接 写个实体类进行开展。

1. 编写一个 主题实体类

//主题枚举
enum AppThemeEnum { defaultTheme, blackTheme }

//主题实体类
class ThemeBean {
  //主题色
  Color primaryColor;

  //title 浅标题颜色
  Color titleLightColor;

  //title 深颜色
  Color titleBlackColor;

  //主背景色
  Color mainBgColor;

  //二级背景色
  Color secondLevelMainBgColor;

  //未选中颜色
  Color unselectedWidgetColor;

  //选中颜色
  Color activeColor;

  //下划线颜色
  Color underlineColor;

  //底部导航栏颜色
  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. 声明两种主题

//默认主题
ThemeBean defaultTheme = ThemeBean(
    //主题色
    Colors.blue,
    //主标题浅色
    Colors.white,
    //主标题深色
    Color(0xff333333),
    //主背景色
    Colors.white,
    //未选中颜色
    Colors.grey,
    //选中颜色
    Colors.blue,
    //下划线颜色
    Color(0xffe6e6e6),
    //底部导航栏颜色
    Color(0xfff2f2f2),
    //二级标题颜色
    Color(0xff666666),
    //二级背景色
    Color(0xffffffff));


//暗黑主题
ThemeBean blackTheme = ThemeBean(
    //主题色
    Color(0xff111111),
    //主标题浅色
    Colors.white,
    //主标题深色
    Colors.white,
    //主背景色
    Color(0xff111111),
    //未选中颜色
    Color(0xff2c2c2c),
    //选中颜色
    Color(0xff2c2c2c),
    //下划线颜色
    Color(0xff3b3b3b),
    //底部导航栏颜色
    Color(0xff010101),
    //二级标题颜色
    Color(0xff979797),
    //二级背景色
    Color(0xff424242));

3.编写获取方法

//主题数组
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

状态管理

使用Provider 进行状态管理、同步。

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

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

///多主题
class CurrentTheme extends ChangeNotifier{
  //当前主题
  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())
      //此是语言状态注册
    ],
    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);