Flutter中的国际化支持：轻松实现多语言应用

Flutter中的国际化支持：轻松实现多语言应用

5 回复

Flutter通过引入Localizations类和MaterialApp的locale属性支持多语言。

更多关于Flutter中的国际化支持：轻松实现多语言应用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，使用intl包和flutter_localizations可以实现多语言支持。通过MaterialApp的localizationsDelegates和supportedLocales配置，轻松管理不同语言的文本资源。

在Flutter中，国际化支持可以通过flutter_localizations和intl包轻松实现。首先，在pubspec.yaml中添加依赖，然后配置MaterialApp的localizationsDelegates和supportedLocales。接着，使用intl包生成多语言资源文件，并在应用中使用AppLocalizations.of(context)来获取翻译文本。这样，应用就能根据用户设备语言自动切换显示内容。

Flutter使用Locale和Resource Bundle支持多语言，简单配置即可实现。

在Flutter中实现国际化（多语言支持）可以通过flutter_localizations和intl包来轻松实现。以下是实现步骤：

1. 添加依赖

首先，在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0

然后运行flutter pub get来安装这些依赖。

2. 创建本地化文件

在lib目录下创建一个l10n文件夹，用于存放本地化文件。在该文件夹中创建app_localizations.dart和intl_messages.arb文件。

app_localizations.dart:

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'l10n/messages_all.dart';

class AppLocalizations {
  static Future<AppLocalizations> load(Locale locale) {
    final String name = locale.countryCode.isEmpty ? locale.languageCode : locale.toString();
    final String localeName = Intl.canonicalizedLocale(name);
    return initializeMessages(localeName).then((_) {
      Intl.defaultLocale = localeName;
      return AppLocalizations();
    });
  }

  static AppLocalizations of(BuildContext context) {
    return Localizations.of<AppLocalizations>(context, AppLocalizations);
  }

  String get hello {
    return Intl.message(
      'Hello',
      name: 'hello',
      desc: 'Greeting',
    );
  }
}

class AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
  const AppLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) => ['en', 'es'].contains(locale.languageCode);

  @override
  Future<AppLocalizations> load(Locale locale) => AppLocalizations.load(locale);

  @override
  bool shouldReload(AppLocalizationsDelegate old) => false;
}

intl_messages.arb:

{
  "@@locale": "en",
  "hello": "Hello"
}

3. 配置MaterialApp

在main.dart文件中，配置MaterialApp以支持国际化：

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'l10n/app_localizations.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: [
        AppLocalizationsDelegate(),
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', ''), // 英语
        const Locale('es', ''), // 西班牙语
      ],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context).hello),
      ),
      body: Center(
        child: Text(AppLocalizations.of(context).hello),
      ),
    );
  }
}

4. 生成本地化代码

最后，运行以下命令生成本地化代码：

flutter pub run intl_translation:extract_to_arb --output-dir=lib/l10n lib/l10n/app_localizations.dart
flutter pub run intl_translation:generate_from_arb --output-dir=lib/l10n --no-use-deferred-loading lib/l10n/app_localizations.dart lib/l10n/intl_*.arb

5. 添加更多语言

要添加更多语言，只需在intl_messages.arb文件中添加对应语言的翻译，并重新生成代码即可。

通过以上步骤，你可以轻松实现Flutter应用的国际化支持。

回到顶部