Flutter 中使用语言国际化

554 阅读1分钟

本次先实现中英文的国际化,切换语言后续再出相关文章;本人用的是vscode开发,所以只讲vscode中如何实现;

第一步 vscode安装Flutter Intl插件

image.png

第二步 配置pubspec.yaml

image.png

  flutter_localizations:
    sdk: flutter
  flutter_intl:
    enabled: true

第三步 lib目录下会生成generated目录和I10n目录(你不用管,应该是pub get后自动创建)

image.png

第四步 I10n目录下添加对应intl_en.arb和intl_zh.arb文件,添加对应的json

image.png

image.png

第五步 main.dart文件做如下修改

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
// flutter_intl为我定义的项目名,可以根据实际情况更换
import 'package:flutter_intl/generated/l10n.dart';

void main() {
  runApp(MyApp());
}

ValueChanged<Locale> localeChange;

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

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

// new
  @override
  Widget build(BuildContext context) {
    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,
            child: Scaffold(
              appBar: AppBar(
                title: Text(S.of(context).app_name), // 在要使用的字段的位置使用配置的文案
                centerTitle: true,
              ),
              body: Center(
                child: Text(S.of(context).app_name),
              ),
            ),
          );
        },
      ),
    );
  }
}

第六步 检验结果

image.png

修改mian.dart中的如下部分 image.png 然后重启项目

image.png

切换语言涉及数据共享,后续再出相关文章 主要通过localeChange(Locale('zh', ''))来控制