Flutter国际化与本地化插件adaptive_locale的使用

Flutter国际化与本地化插件adaptive_locale的使用

通过Damian Aldair撰写。

受Adaptive Theme启发。

这是在你的Flutter应用中处理多语言最简单的方法。它允许你动态设置语言环境，获取正在使用的语言环境以及所有支持的语言环境。它还能够在应用重启后保留语言环境更改。

开始使用

在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  adaptive_locale: <latest_version>

推荐使用

使用如flutter_localizations和intl这样的应用国际化包。

dependencies:
  flutter_localizations:
    sdk: flutter
  intl: <latest_version>

初始化

导入该包：

import 'package:adaptive_locale/adaptive_locale.dart';

确保正确初始化包：

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await AdaptiveLocale.ensureInitialized();
  runApp(const MyApp());
}

你需要将你的MaterialApp或CupertinoApp包裹在AdaptiveLocale中以便管理语言环境。

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AdaptiveLocale(
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      builder: (localizationsDelegates, supportedLocales, currentLocale) {
        return MaterialApp(
          localizationsDelegates: localizationsDelegates,
          supportedLocales: supportedLocales,
          locale: currentLocale,
          title: 'Adaptive Locale Example',
          home: const Screen1(),
        );
      },
    );
  }
}

现在，按照上述步骤初始化你的应用。管理语言环境非常简单。

获取所有支持的语言环境

final Iterable<Locale> locales = AdaptiveLocale.of(context).supportedLocales;

获取当前语言环境

final Locale? locale = AdaptiveLocale.of(context).locale;

如果locale为null，则表示语言环境是根据系统设置的。

设置要使用的语言环境

AdaptiveLocale.of(context).locale = const Locale('es');

如果要设置的语言环境不在支持的范围内，则会失败。建议先检查AdaptiveLocale.of(context).supportedLocales。

如果你设置为null，则表示它将使用系统特定的语言环境。

警告

此包内部使用shared_preferences插件来持久化语言环境更改。如果你的应用使用了shared_preferences（通常情况下），在登出或注销时清除shared_preferences可能会清除这些偏好设置。如果不希望清除这些偏好设置，请小心不要清除它们。

你可以使用AdaptiveLocale.prefKey来排除它，当你清除所有偏好设置时。

或者，你可以在清除偏好设置后调用AdaptiveLocale.of(context).persist()方法使其再次可持久化，如下所示：

final prefs = await SharedPreferences.getInstance();
await prefs.clear();
AdaptiveLocale.of(context).persist();

完整示例

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await AdaptiveLocale.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AdaptiveLocale(
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      builder: (localizationsDelegates, supportedLocales, currentLocale) {
        return MaterialApp(
          localizationsDelegates: localizationsDelegates,
          supportedLocales: supportedLocales,
          locale: currentLocale,
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true,
          ),
          debugShowCheckedModeBanner: false,
          title: 'Adaptive Locale Example',
          home: const Screen1(),
        );
      },
    );
  }
}

class Screen1 extends StatelessWidget {
  const Screen1({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    final loc = AppLocalizations.of(context);
    const packageName = 'adaptive_locale';
    const dev = 'Damian Aldair';

    return Scaffold(
      appBar: AppBar(
        title: Text(loc.example),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text(
              packageName,
              style: TextStyle(
                fontSize: 30.0,
                fontWeight: FontWeight.bold,
              ),
            ),
            Text(loc.developedBy(dev)),
            const SizedBox(height: 50.0),
            ElevatedButton(
              child: Text(loc.nextScreen),
              onPressed: () => Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => const Screen2()),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class Screen2 extends StatelessWidget {
  const Screen2({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    final loc = AppLocalizations.of(context);
    final localeManager = AdaptiveLocale.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text(loc.example),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Padding(
              padding: const EdgeInsets.only(bottom: 50.0),
              child: Text(
                localeManager.locale?.toLanguageTag() ?? loc.system,
                style: const TextStyle(
                  fontSize: 30.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            ListTile(
              title: Text(loc.select),
              trailing: PopupMenuButton<Locale>(
                itemBuilder: (BuildContext context) {
                  return localeManager.supportedLocales
                      .map((locale) => PopupMenuItem<Locale>(
                            value: locale,
                            child: Text(locale.toLanguageTag()),
                          ))
                      .toList();
                },
                onSelected: (Locale locale) {
                  localeManager.locale = locale;
                },
              ),
            ),
            TextButton(
              child: Text(loc.system),
              onPressed: () {
                localeManager.locale = null;
              },
            ),
          ],
        ),
      ),
    );
  }
}