Flutter添加国际化支持

预览

更加简洁的实现方案

• 支持应用内手动切换语言&默认跟随系统语言

  
  Screenshot_1585994812.png

Screenshot_1585994824.png

代码

• 项目目录结构

  
  image.png

• 添加依赖

  flutter_localizations:
    sdk: flutter

image.png

• main.dart:

import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter/material.dart';
import 'package:flutterapp/DemoLocalizations.dart';
import 'DemoLocalizationsDelegate.dart';
import 'freeLocalizations.dart';

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

class MyApp extends StatelessWidget {
  // 此处
  static GlobalKey<FreeLocalizationsState> freeLocalizationStateKey =
      new GlobalKey<FreeLocalizationsState>(); // 1

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //title: DemoLocalizations.of(context).taskTitle, // 此处
      onGenerateTitle: (context) {
        // 此处
        return DemoLocalizations.of(context).taskTitle;
      },
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // 此处
      home: new Builder(
        builder: (context) {
          return new FreeLocalizations(
            key: freeLocalizationStateKey,
            child: new MyHomePage(),
          );
        },
      ),
      // 此处
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        DemoLocalizationsDelegate.delegate,
      ],
      // 此处
      supportedLocales: [
        const Locale('zh', 'CH'),
        const Locale('en', 'US'),
      ],
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  bool flag = false;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  void changeLocale() {
    if (flag)
      MyApp.freeLocalizationStateKey.currentState
          .changeLocale(const Locale('zh', "CH"));
    else
      MyApp.freeLocalizationStateKey.currentState
          .changeLocale(const Locale('en', "US"));
    flag = !flag;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(DemoLocalizations.of(context).titleBarTitle), // 此处
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              DemoLocalizations.of(context).clickTop, // 此处
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
            FlatButton(
              color: Colors.blue,
              child: Text(DemoLocalizations.of(context).changeLanguage),
              onPressed: changeLocale,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: DemoLocalizations.of(context).inc, // 此处
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

• DemoLocalizations.dart:

import 'dart:ui';

import 'package:flutter/widgets.dart';

class DemoLocalizations{
  final Locale locale;

  DemoLocalizations(this.locale);

  static Map<String,Map<String,String>> _localizedValues = {
    'en':{
      'task title':'Flutter Demo',
      'titlebar title':'Flutter Demo Home Page',
      'click tip':'You have pushed the button this many times: ',
      'inc':'Increment',
      'change language':'change language'
    },
    'zh':{
      'task title':'Flutter示例',
      'titlebar title':'Flutter 主示例页面',
      'click tip':'你一共点击了这么多按钮: ',
      'inc': '添加',
      'change language':'切换语言'
    }
  };

  get taskTitle => _localizedValues[locale.languageCode]['task title'];
  get titleBarTitle => _localizedValues[locale.languageCode]['titlebar title'];
  get clickTop => _localizedValues[locale.languageCode]['click tip'];
  get inc => _localizedValues[locale.languageCode]['inc'];
  get changeLanguage => _localizedValues[locale.languageCode]['change language'];

  // 此处
  static DemoLocalizations of(BuildContext context){
    return Localizations.of(context,DemoLocalizations);
  }
}

• freeLocalizations.dart

import 'package:flutter/widgets.dart';

class FreeLocalizations extends StatefulWidget{

  final Widget child;

  FreeLocalizations({Key key,this.child}):super(key:key);

  @override
  State<FreeLocalizations> createState() {
    return new FreeLocalizationsState();
  }
}

class FreeLocalizationsState extends State<FreeLocalizations>{

  Locale _locale;

  void changeLocale(Locale locale){
    setState((){
      _locale = locale;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Localizations.override(
      context: context,
      locale: _locale ?? null,
      child: widget.child,
    );
  }
}

• DemoLocalizationsDelegate.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutterapp/DemoLocalizations.dart';

class DemoLocalizationsDelegate extends LocalizationsDelegate<DemoLocalizations>{
  @override
  bool isSupported(Locale locale) {
    return ['en','zh'].contains(locale.languageCode);
  }

  @override
  Future<DemoLocalizations> load(Locale locale) {
    // DemoLocalizations就是在此方法内被初始化的。
    return new SynchronousFuture<DemoLocalizations>(new DemoLocalizations(locale));
  }

  @override
  bool shouldReload(LocalizationsDelegate<DemoLocalizations> old) {
    return false;
  }

  static final DemoLocalizationsDelegate delegate = DemoLocalizationsDelegate();
}