Flutter國(guó)際化

Demo

• 添加package

flutter_localizations:
    sdk: flutter
intl: any

• 安裝vs code插件

Flutter Intl

1. 點(diǎn)擊vs code菜單欄的View->Command Paletter
2. 搜索Flutter Intl:initialize,點(diǎn)擊執(zhí)行會(huì)生成如下文件
   
   intl.png
   
   同時(shí)在文件pubspec.yaml中會(huì)增加代碼

flutter_intl:
  enabled: true

3. 搜索Flutter Intl: Add locale，點(diǎn)擊執(zhí)行添加新的多語(yǔ)言，比如zh
4. 添加不同語(yǔ)言的資源數(shù)據(jù)
   在生成的intl_en.arb和intl_zh.arb文件中添加json格式數(shù)據(jù)

注意修改后記得執(zhí)行命令 flutter pub get

intl_en.arb

{
  "title": "Hello Flutter!"
}

intl_zh.arb

{
  "title": "您好Flutter!"
}

• 添加代碼

lib文件 MaterialApp

import 'package:flutter_localizations/flutter_localizations.dart';

GetMaterialApp(
  debugShowCheckedModeBanner: false, // 右上角debug圖標(biāo)是否顯示
  localizationsDelegates: const [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
    S.delegate,
  ],
  supportedLocales: S.delegate.supportedLocales,
  locale: Locale.fromSubtags(
      languageCode: mobxCounterStore.useLanguage), // 設(shè)置用戶自定義選擇的語(yǔ)言
  localeListResolutionCallback: (locales, supportedLocales) {
    print('當(dāng)前系統(tǒng)語(yǔ)言：$locales');
    return Locale.fromSubtags(
        languageCode: mobxCounterStore.useLanguage);
  },
  // localeResolutionCallback: (locale, supportedLocales) {
  //   print('localeResolutionCallback$locale');
  //   return const Locale.fromSubtags(languageCode: 'zh');
  // },
)

• 切換語(yǔ)言

localization_demo_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:provider/provider.dart';
import 'package:terminal_flutter_demo/generated/l10n.dart';
import 'package:terminal_flutter_demo/pages/mobxpages/store/mobx_counter.dart';

class LocalizationDemoPage extends StatefulWidget {
  const LocalizationDemoPage({Key? key}) : super(key: key);

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

class _LocalizationDemoPageState extends State<LocalizationDemoPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Text(S.current.title),
          const SizedBox(height: 30),
          Consumer<MobxCounter>(
            builder: (context, mobxCounter, child) {
              return Observer(
                builder: (context) => SwitchListTile(
                  value: mobxCounter.useLanguage == 'zh',
                  title: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(mobxCounter.useLanguage),
                      Text(S.current.title),
                    ],
                  ),
                  onChanged: (value) {
                    mobxCounter.setLanguage(
                        value: mobxCounter.useLanguage == 'zh' ? 'en' : 'zh');
                  },
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}