Flutter_i18n国际化全解

查看官方文档以及Flutter中文网.还是觉得国际化处理的太过复杂.想着是否有合适的第三方控件.还真找到一款能像以往iOS和安卓端.xml格式输入所有的翻译文档.那就是Flutter_i18n.先看看安装以及使用

安装:

在Plugins中搜索然后安装

image.png

自动生成res/values/strings_en.arb.然后在里面编辑
{
"app_name":"app_name",
"app_test": "app_test"
}

即会在lib/目录下生成generated/i18n.dart(我们代码中主要是使用该文件)

image.png

如果需要添加新的语言环境.只需要在values目录右键创建arb文件即可

image.png

即可选出对应的语言环境和地区

image.png

例如添加中文以后出现strings_zh_CN.arb.在里面编辑
{
"app_name": "",
"app_test": "App调试"
}

使用:

看了很多文章.总是出现

The getter 'app_name' was called on null , Receiver: null, Tried calling 'app_name'

具体原因个人猜测:
1.onGenerateTitle: (BuildContext context) => S.of(context).app_name,方法未编辑
2.使用地方不正确.不应在MyApp中使用.而应在home:子Widget中使用

不正确使用.png

正确使用.png

切换当前语言环境.使用GlobalKey绑定一个可变StatefulWidget.去更改当前环境.然后更新所有的Widget即可

完整代码:

    import 'package:flutter/material.dart';
    import 'generated/i18n.dart';
    import 'package:flutter_localizations/flutter_localizations.dart';

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

    GlobalKey<_FreeLocalizations> freeLocalizationStateKey =
    new GlobalKey<_FreeLocalizations>(); // 1

    class MyApp extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
            return new MaterialApp(
                                   
                                   onGenerateTitle: (BuildContext context) => S.of(context).app_name,
                                   localizationsDelegates: const [
                                                                  S.delegate,
                                                                  //如果你在使用 material library，需要添加下面两个delegate
                                                                  GlobalMaterialLocalizations.delegate,
                                                                  GlobalWidgetsLocalizations.delegate,
                                                                  ],
                                   supportedLocales: S.delegate.supportedLocales,
                                   //      localeListResolutionCallback: S.delegate.listResolution(fallback: const Locale('zh', 'CN')),
                                   title: S.of(context).app_test,
                                   theme: new ThemeData(
                                                        primarySwatch: Colors.blue,
                                                        ),
                                   home: new Builder(builder: (context) {
                return new FreeLocalizations(
                                             key: freeLocalizationStateKey,
                                             child: new MyHomePage(),
                                             );
            }),
                                   );
        }
    }

    class MyHomePage extends StatefulWidget {
        MyHomePage({Key key}) : super(key: key);
        
        @override
        _MyHomePageState createState() => _MyHomePageState();
    }

    class _MyHomePageState extends State {
        int _counter = 0;
        bool flag = true;
        
        void changeLocale() {
            if (flag) {
                freeLocalizationStateKey.currentState
                .changeLocale(const Locale('zh', "CN"));
            } else {
                freeLocalizationStateKey.currentState
                .changeLocale(const Locale('en', ""));
            }
            flag = !flag;
        }
        
        @override
        Widget build(BuildContext context) {
            return new Scaffold(
                                appBar: AppBar(
                                               title: new Text(S.of(context).app_test), // 此处
                                               ),
                                body: Center(
                                             child: Column(
                                                           mainAxisAlignment: MainAxisAlignment.center,
                                                           children: [
                                                                              Text(
                                                                                   S.of(context).app_test,
                                                                                   ),
                                                                              Text(
                                                                                   '$_counter',
                                                                                   style: Theme.of(context).textTheme.display1,
                                                                                   ),
                                                                              ],
                                                           ),
                                             ),
                                floatingActionButton: FloatingActionButton(
                                                                           onPressed: changeLocale,
                                                                           tooltip: 'Increment',
                                                                           child: Icon(Icons.add),
                                                                           )); // Th
        }
    }

    class FreeLocalizations extends StatefulWidget {
        final Widget child;
        
        FreeLocalizations({Key key, this.child}) : super(key: key);
        
        @override
        State createState() {
            return new _FreeLocalizations();
        }
    }

    class _FreeLocalizations extends State {
        Locale _locale = const Locale('en', '');
        
        changeLocale(Locale locale) {
            setState(() {
                _locale = locale;
            });
        }
        
        @override
        Widget build(BuildContext context) {
            return new Localizations.override(
                                              context: context,
                                              locale: _locale,
                                              child: widget.child,
                                              );
        }
    }

项目链接https://github.com/FQDEVER/Flutter_LanguageDemo