Flutter语言切换插件 locale_switcher 的使用

locale_switcher 是一个用于在Flutter应用程序中切换语言环境的插件。它允许你仅用两行代码即可添加语言切换功能。本文将介绍如何使用这个插件，并提供完整的示例代码。

插件特性

• LocaleManager：可选地加载/存储最后选择的语言环境到SharedPreferences，监听并更新应用的语言环境。
• LocaleSwitcher：提供了多种方式来切换语言环境，如菜单、分段按钮、图标按钮等。
• 支持多语言国家的优雅显示方式。
• 提供了其他辅助工具，如带有提示的图标(LangIconWithToolTip)和展示选择语言对话框的功能(showSelectLocaleDialog)。

使用步骤

1. 设置 LocaleManager

首先需要将你的 MaterialApp 或 CupertinoApp 包装在 LocaleManager 中。以下是一个使用 intl 包的例子：

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:locale_switcher/locale_switcher.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return LocaleManager(
      child: MaterialApp(
        locale: LocaleSwitcher.localeBestMatch,
        supportedLocales: AppLocalizations.supportedLocales,
        localizationsDelegates: AppLocalizations.localizationsDelegates,
        title: 'Locale Switcher Demo',
        home: MyHomePage(title: 'Home Page'),
      ),
    );
  }
}

2. 添加 LocaleSwitcher 到应用中

可以在应用中的任何位置添加 LocaleSwitcher 小部件。例如，在AppBar中添加一个图标按钮以打开语言选择窗口：

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({required this.title});

  [@override](/user/override)
  Widget build(BuildContext context) {
    final loc = AppLocalizations.of(context); // 获取本地化对象
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        actions: [
          LocaleSwitcher.iconButton(), // 添加图标按钮以选择语言
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            LocaleSwitcher.menu(title: loc?.chooseLanguage ?? "Choose Language"),
          ],
        ),
      ),
    );
  }
}

示例Demo

下面是一个完整的示例项目，展示了如何使用 locale_switcher 插件进行语言切换：

import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:locale_switcher/locale_switcher.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return LocaleManager(
      child: MaterialApp(
        locale: LocaleSwitcher.localeBestMatch,
        supportedLocales: AppLocalizations.supportedLocales,
        localizationsDelegates: AppLocalizations.localizationsDelegates,
        title: 'Locale Switcher Demo',
        home: MyHomePage(title: 'Home Page'),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({required this.title});

  [@override](/user/override)
  Widget build(BuildContext context) {
    final loc = AppLocalizations.of(context);
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        actions: [LocaleSwitcher.iconButton()],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            LocaleSwitcher.menu(title: loc?.chooseLanguage ?? "Choose Language"),
          ],
        ),
      ),
    );
  }
}