Flutter国际化插件flutter_google_i18n的使用

Flutter国际化插件flutter_google_i18n的使用

简介

flutter-google-i18n 是一个用于使用Google表格进行Flutter应用国际化的小型库。

示例

您可以查看演示应用：https://github.com/macav/flutter-google-i18n-demo

如何获取表格JSON链接

1. 打开包含翻译的表格，其结构应与示例相同。
2. 发布文档到网络。
   • 点击文件 -> 发布到网络 -> 发布。您可以忽略提供的链接。
3. 获取可分享的链接。
   • 点击文件 -> 共享 -> 获取链接。 您将得到如下格式的链接：

   https://docs.google.com/spreadsheets/d/<SPREADSHEET_IDENTIFIER>/edit?usp=sharing
   

4. 将标识符替换到以下链接：

   https://spreadsheets.google.com/feeds/list/<SPREADSHEET_IDENTIFIER>/1/public/values?alt=json
   

   您应该会得到表格数据的JSON格式。 示例链接如下：

   https://spreadsheets.google.com/feeds/list/1TGbtKpdNRptYwUVtqmkI2L7Ix00i-fQMnrChGHx2Ajk/1/public/values?alt=json
   

完整示例代码

import 'package:flutter/material.dart';
import 'package:flutter_google_i18n/flutter_google_i18n.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

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

class MyAppState extends State<MyApp> {
  Locale locale;

  [@override](/user/override)
  void initState() {
    super.initState();
    locale = Locale('en'); // 初始化为英语
  }

  onLocaleChange(Locale locale) {
    setState(() {
      this.locale = locale;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Google I18n Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      localizationsDelegates: [
        GoogleI18nLocalizationsDelegate(
            'https://spreadsheets.google.com/feeds/list/1TGbtKpdNRptYwUVtqmkI2L7Ix00i-fQMnrChGHx2Ajk/1/public/values?alt=json'), // 替换为您的表格链接
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      locale: locale,
      home: MyHomePage(onLocaleChange), // 传递onLocaleChange回调
    );
  }
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  State<StatefulWidget> createState() {
    return new MyAppState();
  }
}

class MyHomePage extends StatelessWidget {
  final void Function(Locale locale) onLocaleSwitch;

  MyHomePage(this.onLocaleSwitch);

  [@override](/user/override)
  Widget build(BuildContext context) {
    GoogleI18nLocalizations i18n = GoogleI18nLocalizations.of(context); // 获取本地化对象

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Google I18n'), // 应用标题
      ),
      body: Center(
          child: Column(
        children: <Widget>[
          Text(i18n.t('title')), // 显示翻译后的标题
          Padding(padding: EdgeInsets.only(top: 30)), // 添加顶部间距
          Row(
            mainAxisAlignment: MainAxisAlignment.center, // 居中对齐
            children: <Widget>[
              DropdownButton(
                items: i18n.supportedLocales.map((locale) { // 创建下拉菜单项
                  return DropdownMenuItem(
                      child: Text(locale.toUpperCase()), value: locale);
                }).toList(),
                value: i18n.locale.languageCode, // 设置当前语言
                onChanged: (String value) { // 更改语言时的回调
                  Locale newLocale = Locale(value);
                  GoogleI18nLocalizations.setLocale(context, newLocale); // 更新上下文中的语言
                  this.onLocaleSwitch(newLocale); // 触发回调
                },
              ),
              Padding(padding: EdgeInsets.symmetric(horizontal: 5)), // 添加水平间距
              ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    textStyle: TextStyle(color: Colors.white),
                    primary: Colors.blue,
                    onPrimary: Colors.white,
                  ),
                  child: Text(
                      "Switch to ${i18n.locale.languageCode == 'en' ? 'DE' : 'EN'}"), // 切换语言按钮文本
                  onPressed: () {
                    Locale newLocale = i18n.locale.languageCode == 'en' // 判断当前语言并切换
                        ? const Locale('de')
                        : const Locale('en');
                    GoogleI18nLocalizations.setLocale(context, newLocale); // 更新上下文中的语言
                    this.onLocaleSwitch(newLocale); // 触发回调
                  })
            ],
          )
        ],
      )),
    );
  }
}