Flutter 中使用语言国际化

本章接上一章内容，上一篇主要讲了在flutter如何使用多语言，本篇主要讲下如何用Provider进行状态管理来实现页面语言切换；

1. 安装provider依赖，在pubspec.yaml中引入provider;

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  provider: ^5.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

flutter_intl:
    enabled: true

2. 创建存储local语言的provider

import 'package:flutter/material.dart';

class LocalProvide extends ChangeNotifier {
  String currentLang = 'en';

  setLocalLanguage(curLang) {
    currentLang = curLang;
    notifyListeners();
  }
}

3. 将provider中的local状态注入到全局,main.dart中代码如下

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_intl/generated/l10n.dart';
import 'package:provider/provider.dart';
import 'package:flutter_intl/provider/local.dart';

void main() {
  runApp(MultiProvider(providers: [
    ChangeNotifierProvider(create: (_) => LocalProvide()),
  ], child: MyApp()));
}

ValueChanged<Locale> localeChange;

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // new 设置当前的语言
  // Locale _locale = const Locale('zh', '');
  // @override
  // void initState() {
  //   super.initState();
  //   localeChange = (locale) {
  //     setState(() {
  //       _locale = locale;
  //     });
  //   };
  // }

// new
  @override
  Widget build(BuildContext context) {
    return Consumer<LocalProvide>(
        //接收数据
        builder: (context, localProvide, child) {
      return MaterialApp(
        title: 'project',
        theme: ThemeData.dark(),
        debugShowCheckedModeBanner: false,
        localizationsDelegates: const [
          S.delegate,
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate
        ],
        supportedLocales: S.delegate.supportedLocales,
        home: Builder(
          builder: (BuildContext context) {
            return Localizations.override(
              context: context,
              locale: Locale(localProvide.currentLang, ''),
              child: Scaffold(
                appBar: AppBar(
                  title: Text(S.of(context).app_name), // 在要使用的字段的位置使用配置的文案
                  centerTitle: true,
                ),
                body: Center(
                  child: Column(
                    children: [
                      Container(
                        padding: EdgeInsets.all(30),
                        height: 100,
                        child: Text(
                          S.of(context).app_name,
                          style: TextStyle(fontSize: 30),
                        ),
                      ),
                      InkWell(
                        onTap: () {
                          String curLang = localProvide.currentLang;
                          if (curLang == 'en') {
                            curLang = 'zh';
                          } else {
                            curLang = 'en';
                          }
                          Provider.of<LocalProvide>(context, listen: false)
                              .setLocalLanguage(curLang);
                        },
                        child: Text(
                          S.of(context).toggle_lang,
                          style: TextStyle(fontSize: 30),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            );
          },
        ),
      );
    });
  }
}

好了这个时候点击切换语言就能实现语言实时切换了。