Flutter 多语言和多主题

封面图 • 2025-09-26 • Flutter

在 Flutter 中实现**多语言支持（国际化）**和**多主题切换**是提升用户体验的重要功能。下面我将分别介绍如何在 Flutter 应用中实现这两个功能，并给出一个完整的示例。

---

## 一、Flutter 多语言支持（国际化）

### 1. 使用 `flutter_localizations` 和 `intl` 包

#### 步骤：

1. **添加依赖**  
   在 `pubspec.yaml` 中添加以下依赖：

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

2. **创建本地化文件**  
   创建一个 `lib/l10n/` 目录，里面包含不同语言的 `.arb` 文件（如：`app_en.arb`, `app_zh.arb`）。

- `app_en.arb` (英文)
     ```json
     {
       "greeting": "Hello",
       "welcome": "Welcome to Flutter App"
     }
     ```

- `app_zh.arb` (中文)
     ```json
     {
       "greeting": "你好",
       "welcome": "欢迎使用 Flutter 应用"
     }
     ```

3. **生成本地化类**  
   运行命令生成本地化类：

```bash
   flutter pub get
   flutter gen-l10n
   ```

4. **配置 MaterialApp 的本地化设置**

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

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

class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         localizationsDelegates: AppLocalizations.localizationsDelegates,
         supportedLocales: AppLocalizations.supportedLocales,
         home: MyHomePage(),
       );
     }
   }

class MyHomePage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       final l10n = AppLocalizations.of(context)!;
       return Scaffold(
         appBar: AppBar(title: Text(l10n.greeting)),
         body: Center(child: Text(l10n.welcome)),
       );
     }
   }
   ```

---

## 二、Flutter 多主题切换

### 1. 使用 `Provider` 或 `ChangeNotifier` 实现主题管理

#### 步骤：

1. **创建主题模型类**

```dart
   import 'package:flutter/material.dart';

class ThemeModel with ChangeNotifier {
     bool _isDarkMode = false;

bool get isDarkMode => _isDarkMode;

void toggleTheme() {
       _isDarkMode = !_isDarkMode;
       notifyListeners();
     }

ThemeData get themeData {
       return _isDarkMode ? ThemeData.dark() : ThemeData.light();
     }
   }
   ```

2. **使用 Provider 管理主题**

```dart
   import 'package:flutter/material.dart';
   import 'package:provider/provider.dart';
   import 'theme_model.dart';

void main() {
     runApp(
       ChangeNotifierProvider(
         create: (_) => ThemeModel(),
         child: MyApp(),
       ),
     );
   }

class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       final themeModel = Provider.of<ThemeModel>(context);
       return MaterialApp(
         theme: themeModel.themeData,
         home: HomeScreen(),
       );
     }
   }

class HomeScreen extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       final themeModel = Provider.of<ThemeModel>(context);
       return Scaffold(
         appBar: AppBar(
           title: Text("Theme Switcher"),
           actions: [
             IconButton(
               icon: Icon(Icons.brightness_6),
               onPressed: () {
                 themeModel.toggleTheme();
               },
             ),
           ],
         ),
         body: Center(child: Text("Hello, World!")),
       );
     }
   }
   ```

---

## 三、结合多语言与多主题

你可以将上面的两个功能结合起来，比如根据用户选择的语言和主题来动态切换 UI。

### 示例：在 `MyApp` 中同时处理语言和主题

```dart
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:provider/provider.dart';
import 'theme_model.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => ThemeModel()),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeModel = Provider.of<ThemeModel>(context);
    final l10n = AppLocalizations.of(context)!;

return MaterialApp(
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      theme: themeModel.themeData,
      home: HomeScreen(),
    );
  }
}
```

---

## 四、扩展建议

- 使用 `SharedPreferences` 存储用户的语言和主题偏好。
- 添加语言选择器（下拉菜单或按钮）让用户切换语言。
- 使用 `flutter_gen` 自动生成本地化代码，提高效率。

---

如果你需要更详细的代码示例或者想了解如何集成到现有项目中，可以告诉我你的具体需求！