flutter 主题切换 和 国际化笔记

主题切换

provider和shared_preferences

1.引入这两个插件

import 'package:provider/provider.dart';
import 'package:shared_preferences/shared_preferences.dart';

2.建立主题文件

/**
 * 主题选项
 */
import 'package:flutter/material.dart';

final ThemeData themeDataRed = new ThemeData(
  primaryColor: Colors.red,
);
final ThemeData themeDataPink = new ThemeData(
  primaryColor: Colors.pink,
);
final ThemeData themeDataPurple = new ThemeData(
  primaryColor: Colors.purple,
);
final ThemeData themeDataBlack = new ThemeData(
  primaryColor: Colors.black,
);
List themeDataList = [
  themeDataRed,
  themeDataPink,
  themeDataPurple,
  themeDataBlack
];

3.main引入主题文件

import './provider/them.dart';

//s使用provider
void main() => runApp(
  MultiProvider(
    providers: [
      ChangeNotifierProvider<Counter>.value(value: Counter(),),//语言包
      ChangeNotifierProvider<Themes>.value(value: Themes(),),//语言包CurrentIndex
      ChangeNotifierProvider<CurrentIndex>.value(value: CurrentIndex(),),
    ],
    child: MyApp(),
  ),
);
//语言主题获取
String _lang = Provider.of<Counter>(context).count;
String _theme = Provider.of<Themes>(context).t;
//使用主题
theme:list[_theme],

4.改变主题

onPressed: (){
        Provider.of<Themes>(context).change(index);
    },

国际化

添加依赖 将其添加到包的pubspec.yaml文件中：

dependencies:
  flutter_i18n: ^0.8.0

1.创建json翻译文件,创建两个或者多个文件

/assets/i18n/en.json

{
  "title": "Test app",
  "label": {
    "main": "Hello {user}!"
  },
  "button": {
    "clickMe": "Click here"
  },
  "toastMessage": "You clicked on button!",
  "clicked": {
    "times-0": "You clicked {times} times!",
    "times-1": "You clicked {time} time!",
    "times-2": "You clicked {times} times!"
  }
}
/assets/i18n/it.json

{
  "title": "App di test",
  "label": {
    "main": "Ciao {user}!"
  },
  "button": {
    "clickMe": "Premi qui"
  },
  "toastMessage": "Hai premuto un bottone!",
  "clicked": {
    "times-0": "Hai premuto {times} volte!",
    "times-1": "Hai premuto {time} volta!",
    "times-2": "Hai premuto {times} volte!"
  }
}

2.在pubspec.yaml文件中添加资源配置：

assets:
   - assets/i18n/

3.provider建立，首页引用

import 'package:flutter/material.dart';

class Counter with ChangeNotifier {//1
  String _count = 'en';
  void changeLang(index) {
    _count = index;
    notifyListeners();//2
  }
  get count => _count;//3
}

String _lang = Provider.of<Counter>(context).count;

localizationsDelegates: [
        // 本地化的代理类
          FlutterI18nDelegate(useCountryCode: true, fallbackFile: _lang, path: 'assets/i18n'),
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
        ],
        supportedLocales: [
          const Locale('en', 'US'), // 美国英语
          const Locale('zh', 'CN'), // 中文简体
          //其它Locales
        ],
    title: 'Flutter Demo',

4.改变语言类型

onChanged:(index) async{
      setState(() {
        check = index;
      });
      Provider.of<Counter>(context).changeLang('zh');
      await FlutterI18n.refresh(context,new Locale('zh')) ;
    }
  ),

还要结合本地存储使用