登录
《Flutter全栈开发实战指南：从零到高级》- 20 -主题与国际化
2025年12月2日 09:44
引言
在移动应用开发中，用户体验个性化已成为基本要求，这里将深入探讨Flutter应用中的主题切换和国际化实现。掌握这些技能，让你的应用能够适应不同用户群体的视觉偏好和语言需求。
为什么需要主题与国际化？
Flutter提供了强大的主题和国际化支持，但很多开发者在实际项目中会遇到以下问题：
- 如何实现丝滑的主题切换？
- 如何管理动态主题配置？
- 如何处理多语言资源？以及如何实现运行时语言切换？
本文将带着以上疑惑一一解答这些问题
一、主题系统
1.1 架构原理
Flutter的主题系统基于继承（Inheritance） 设计模式构建。让我们通过一个架构图来加深理解：
graph TB
A[MaterialApp] --> B[ThemeData]
B --> C[ColorScheme]
B --> D[TextTheme]
B --> E[Other Themes]
C --> F[primaryColor]
C --> G[secondaryColor]
C --> H[surfaceColor]
D --> I[headline1]
D --> J[bodyText1]
D --> K[caption]
style1[Widget] -.-> B
style2[Widget] -.-> B
style3[Widget] -.-> B
subgraph "Theme Scope"
B
end
核心原理：ThemeData对象通过Theme widget在整个widget树中向下传递，任何子widget都可以通过Theme.of(context)获取当前主题数据。
1.2 主题配置
亮色主题
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '主题与国际化',
// 默认亮色主题
theme: ThemeData(
// 使用ColorScheme定义颜色
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.blue,
brightness: Brightness.light,
),
// 主题配置
textTheme: const TextTheme(
displayLarge: TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold,
color: Colors.black87,
),
bodyLarge: TextStyle(
fontSize: 16,
color: Colors.black87,
),
),
// 组件主题配置
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
),
// 应用栏主题
appBarTheme: const AppBarTheme(
centerTitle: true,
elevation: 2,
),
),
home: const HomePage(),
);
}
}
暗色主题
// 暗色主题配置
ThemeData darkTheme = ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.blue,
brightness: Brightness.dark,
),
// 暗色模式下的文本颜色需要调整
textTheme: const TextTheme(
displayLarge: TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold,
color: Colors.white70,
),
bodyLarge: TextStyle(
fontSize: 16,
color: Colors.white70,
),
),
scaffoldBackgroundColor: Colors.grey[900],
);
1.3 使用主题
在Widget中使用主题
class ThemedWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 获取当前主题
final theme = Theme.of(context);
final colorScheme = theme.colorScheme;
final textTheme = theme.textTheme;
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: colorScheme.primaryContainer, // 使用主题颜色
borderRadius: BorderRadius.circular(12),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'标题文本',
style: textTheme.headlineMedium?.copyWith(
color: colorScheme.onPrimaryContainer,
),
),
const SizedBox(height: 8),
Text(
'老师的会计法律束带结发拉卡萨电极法啦束带结发。',
style: textTheme.bodyLarge?.copyWith(
color: colorScheme.onPrimaryContainer.withOpacity(0.8),
),
),
const SizedBox(height: 16),
// 使用主题化的按钮
ElevatedButton(
onPressed: () {},
child: Text('主题按钮'),
),
],
),
);
}
}
自定义主题扩展
有时我们需要在主题中添加自定义属性，可以通过扩展ThemeExtension来实现：
// 1. 创建主题扩展类
@immutable
class CustomColors extends ThemeExtension<CustomColors> {
const CustomColors({
required this.success,
required this.warning,
required this.danger,
required this.info,
});
final Color success;
final Color warning;
final Color danger;
final Color info;
@override
ThemeExtension<CustomColors> copyWith({
Color? success,
Color? warning,
Color? danger,
Color? info,
}) {
return CustomColors(
success: success ?? this.success,
warning: warning ?? this.warning,
danger: danger ?? this.danger,
info: info ?? this.info,
);
}
@override
ThemeExtension<CustomColors> lerp(
ThemeExtension<CustomColors>? other,
double t,
) {
if (other is! CustomColors) {
return this;
}
return CustomColors(
success: Color.lerp(success, other.success, t)!,
warning: Color.lerp(warning, other.warning, t)!,
danger: Color.lerp(danger, other.danger, t)!,
info: Color.lerp(info, other.info, t)!,
);
}
}
// 2. 在主题中使用
ThemeData(
extensions: const <ThemeExtension<dynamic>>[
CustomColors(
success: Colors.green,
warning: Colors.orange,
danger: Colors.red,
info: Colors.blue,
),
],
);
// 3. 在Widget中使用
final customColors = Theme.of(context).extension<CustomColors>()!;
Container(
color: customColors.success,
child: Text('成功状态', style: TextStyle(color: Colors.white)),
);
二、动态主题切换
2.1 状态管理方案选择
对于主题切换，我们需要一个全局状态管理方案。以下是几种常见方案的对比：
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| Provider | 官方推荐 | 需要一定学习成本 | 中小型应用 |
| Riverpod | 类型安全，编译时检查 | 概念较多，有一定学习成本 | 中大型应用 |
| Bloc | 状态管理规范 | 模板代码多 | 大型复杂应用 |
| GetX | 简单快捷 | 耦合度较高 | 快速开发 |
这里我们使用Provider，因为它是Flutter官方推荐且学习起来相对简单。
2.2 主题管理实现
步骤1：创建主题状态管理类
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
// 主题模式枚举
enum ThemeModeType {
light, // 亮色模式
dark, // 暗色模式
system, // 跟随系统
custom, // 自定义
}
// 主题管理器
class ThemeManager with ChangeNotifier {
ThemeModeType _themeMode = ThemeModeType.system;
ThemeData _lightTheme = _defaultLightTheme;
ThemeData _darkTheme = _defaultDarkTheme;
ThemeData? _customTheme;
// 亮色主题
static final ThemeData _defaultLightTheme = ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.blue,
brightness: Brightness.light,
),
useMaterial3: true,
);
// 暗色主题
static final ThemeData _defaultDarkTheme = ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.blue,
brightness: Brightness.dark,
),
useMaterial3: true,
);
// 获取当前主题模式
ThemeModeType get themeMode => _themeMode;
// 获取当前主题数据
ThemeData get currentTheme {
switch (_themeMode) {
case ThemeModeType.light:
return _lightTheme;
case ThemeModeType.dark:
return _darkTheme;
case ThemeModeType.custom:
return _customTheme ?? _defaultLightTheme;
case ThemeModeType.system:
default:
// 根据系统设置决定
final platformBrightness = WidgetsBinding.instance.window.platformBrightness;
return platformBrightness == Brightness.dark ? _darkTheme : _lightTheme;
}
}
// 切换主题
Future<void> switchTheme(ThemeModeType newMode) async {
_themeMode = newMode;
// 保存到本地存储
final prefs = await SharedPreferences.getInstance();
await prefs.setInt('theme_mode', newMode.index);
// 通知监听者
notifyListeners();
}
// 自定义主题
Future<void> setCustomTheme(ThemeData theme) async {
_customTheme = theme;
_themeMode = ThemeModeType.custom;
// 保存配置
final prefs = await SharedPreferences.getInstance();
await prefs.setInt('theme_mode', ThemeModeType.custom.index);
notifyListeners();
}
// 缓存中获取主题设置
Future<void> loadThemeFromPrefs() async {
final prefs = await SharedPreferences.getInstance();
final savedModeIndex = prefs.getInt('theme_mode');
if (savedModeIndex != null) {
final savedMode = ThemeModeType.values[savedModeIndex];
_themeMode = savedMode;
notifyListeners();
}
}
// 更新亮色
void updateLightTheme(ThemeData newTheme) {
_lightTheme = newTheme;
if (_themeMode == ThemeModeType.light) {
notifyListeners();
}
}
// 更新暗色
void updateDarkTheme(ThemeData newTheme) {
_darkTheme = newTheme;
if (_themeMode == ThemeModeType.dark) {
notifyListeners();
}
}
}
步骤2：在应用入口配置Provider
void main() async {
// 确保WidgetsFlutterBinding初始化
WidgetsFlutterBinding.ensureInitialized();
// 创建主题实例
final themeManager = ThemeManager();
// 加载保存的主题设置
await themeManager.loadThemeFromPrefs();
runApp(
// 使用MultiProvider包装应用
MultiProvider(
providers: [
ChangeNotifierProvider.value(value: themeManager),
// 其他Provider...
],
child: const MyApp(),
),
);
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
// 使用Consumer监听主题变化
return Consumer<ThemeManager>(
builder: (context, themeManager, child) {
return MaterialApp(
title: '主题与国际化',
// 使用主题管理器中的当前主题
theme: themeManager.currentTheme,
darkTheme: themeManager.currentTheme,
themeMode: ThemeMode.system,
home: const HomePage(),
);
},
);
}
}
步骤3：创建主题切换界面
class ThemeSettingsPage extends StatelessWidget {
const ThemeSettingsPage({super.key});
@override
Widget build(BuildContext context) {
final themeManager = Provider.of<ThemeManager>(context);
return Scaffold(
appBar: AppBar(
title: const Text('主题设置'),
),
body: ListView(
padding: const EdgeInsets.all(16),
children: [
// 主题模式选择卡片
_buildThemeModeCard(themeManager),
const SizedBox(height: 24),
// 亮色主题
_buildThemeCustomizationCard(
themeManager,
isDark: false,
),
const SizedBox(height: 24),
// 暗色主题
_buildThemeCustomizationCard(
themeManager,
isDark: true,
),
const SizedBox(height: 24),
// 主题预览
_buildThemePreviewCard(context),
],
),
);
}
Widget _buildThemeModeCard(ThemeManager themeManager) {
return Card(
elevation: 2,
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'主题模式',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 12),
// 主题模式选项
...ThemeModeType.values.map((mode) {
return RadioListTile<ThemeModeType>(
title: Text(_getThemeModeName(mode)),
value: mode,
groupValue: themeManager.themeMode,
onChanged: (value) {
if (value != null) {
themeManager.switchTheme(value);
}
},
);
}).toList(),
],
),
),
);
}
String _getThemeModeName(ThemeModeType mode) {
switch (mode) {
case ThemeModeType.light:
return '亮色模式';
case ThemeModeType.dark:
return '暗色模式';
case ThemeModeType.system:
return '跟随系统';
case ThemeModeType.custom:
return '自定义主题';
}
}
Widget _buildThemeCustomizationCard(
ThemeManager themeManager, {
required bool isDark,
}) {
return Card(
elevation: 2,
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
isDark ? '暗色主题' : '亮色主题',
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 12),
// 主题色选择
const Text('主题色'),
const SizedBox(height: 8),
// 颜色选择器
Wrap(
spacing: 8,
runSpacing: 8,
children: [
_buildColorOption(
color: Colors.blue,
isSelected: true,
onTap: () => _updateThemeColor(themeManager, Colors.blue, isDark),
),
_buildColorOption(
color: Colors.green,
isSelected: false,
onTap: () => _updateThemeColor(themeManager, Colors.green, isDark),
),
_buildColorOption(
color: Colors.red,
isSelected: false,
onTap: () => _updateThemeColor(themeManager, Colors.red, isDark),
),
_buildColorOption(
color: Colors.purple,
isSelected: false,
onTap: () => _updateThemeColor(themeManager, Colors.purple, isDark),
),
_buildColorOption(
color: Colors.orange,
isSelected: false,
onTap: () => _updateThemeColor(themeManager, Colors.orange, isDark),
),
_buildColorOption(
color: Colors.teal,
isSelected: false,
onTap: () => _updateThemeColor(themeManager, Colors.teal, isDark),
),
],
),
],
),
),
);
}
Widget _buildColorOption({
required Color color,
required bool isSelected,
required VoidCallback onTap,
}) {
return GestureDetector(
onTap: onTap,
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: color,
shape: BoxShape.circle,
border: isSelected
? Border.all(color: Colors.white, width: 3)
: null,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 4,
offset: const Offset(0, 2),
),
],
),
child: isSelected
? const Icon(Icons.check, color: Colors.white, size: 20)
: null,
),
);
}
void _updateThemeColor(
ThemeManager themeManager,
Color color,
bool isDark,
) {
final newTheme = ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: color,
brightness: isDark ? Brightness.dark : Brightness.light,
),
useMaterial3: true,
);
if (isDark) {
themeManager.updateDarkTheme(newTheme);
} else {
themeManager.updateLightTheme(newTheme);
}
}
Widget _buildThemePreviewCard(BuildContext context) {
final theme = Theme.of(context);
return Card(
elevation: 2,
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'主题预览',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 12),
// 组件预览
Column(
children: [
// 按钮
Wrap(
spacing: 8,
children: [
ElevatedButton(
onPressed: () {},
child: const Text('主要按钮'),
),
OutlinedButton(
onPressed: () {},
child: const Text('轮廓按钮'),
),
TextButton(
onPressed: () {},
child: const Text('文本按钮'),
),
],
),
const SizedBox(height: 16),
// 卡片预览
Card(
child: Padding(
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'卡片标题',
style: theme.textTheme.titleLarge,
),
const SizedBox(height: 8),
Text(
'这是一个卡片内容的预览，这是一个卡片内容的预览，这是一个卡片内容的预览。',
style: theme.textTheme.bodyMedium,
),
],
),
),
),
const SizedBox(height: 16),
// 颜色预览
Row(
children: [
_buildColorPreview('主色', theme.colorScheme.primary),
const SizedBox(width: 8),
_buildColorPreview('辅色', theme.colorScheme.secondary),
const SizedBox(width: 8),
_buildColorPreview('背景', theme.colorScheme.background),
],
),
],
),
],
),
),
);
}
Widget _buildColorPreview(String label, Color color) {
return Expanded(
child: Column(
children: [
Container(
height: 40,
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.grey.shade300),
),
),
const SizedBox(height: 4),
Text(
label,
style: const TextStyle(fontSize: 12),
),
],
),
);
}
}
2.3 渐变主题与动画切换
// 渐变主题切换
class AnimatedThemeSwitcher extends StatefulWidget {
final Widget child;
const AnimatedThemeSwitcher({super.key, required this.child});
@override
State<AnimatedThemeSwitcher> createState() => _AnimatedThemeSwitcherState();
}
class _AnimatedThemeSwitcherState extends State<AnimatedThemeSwitcher>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
// 创建动画控制器
_controller = AnimationController(
duration: const Duration(milliseconds: 300),
vsync: this,
);
// 创建缓动动画
_animation = CurvedAnimation(
parent: _controller,
curve: Curves.easeInOut,
);
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
// 监听主题变化，开始动画
final themeManager = Provider.of<ThemeManager>(context, listen: true);
// 每次主题变化时重新启动动画
_controller.forward(from: 0);
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _animation,
builder: (context, child) {
return Opacity(
opacity: _animation.value,
child: Transform.scale(
scale: 0.95 + 0.05 * _animation.value,
child: child,
),
);
},
child: widget.child,
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}
三、国际化
3.1 Flutter国际化架构
Flutter国际化系统基于Localizations机制，其工作流程如下：
sequenceDiagram
participant App as 应用程序
participant MaterialApp as MaterialApp
participant Localizations as Localizations
participant Delegate as 本地化代理
participant Resource as 资源文件
participant Widget as Widget
App->>MaterialApp: 提供localizationsDelegates
MaterialApp->>Localizations: 加载本地化配置
Localizations->>Delegate: 请求本地化资源
Delegate->>Resource: 加载对应语言资源
Resource-->>Delegate: 返回资源数据
Delegate-->>Localizations: 返回Localizations类
Localizations-->>MaterialApp: 建立本地化上下文
Widget->>Localizations: 通过Localizations.of获取文本
Localizations-->>Widget: 返回本地化文本
3.2 国际化配置
步骤1：添加依赖
# pubspec.yaml
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
intl: ^0.18.1 # 用于日期、数字格式化
shared_preferences: ^2.2.2
步骤2：创建国际化支持类
// lib/l10n/app_localizations.dart
import 'dart:async';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
// 代理
class AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
const AppLocalizationsDelegate();
@override
bool isSupported(Locale locale) {
// 支持的语言列表
return ['en', 'zh', 'ja', 'ko'].contains(locale.languageCode);
}
@override
Future<AppLocalizations> load(Locale locale) {
// 加载对应的本地化资源
return SynchronousFuture<AppLocalizations>(AppLocalizations(locale));
}
@override
bool shouldReload(AppLocalizationsDelegate old) => false;
}
// 本地化类
class AppLocalizations {
final Locale locale;
AppLocalizations(this.locale);
// 静态方法
static AppLocalizations? of(BuildContext context) {
return Localizations.of<AppLocalizations>(context, AppLocalizations);
}
// 资源文件映射
static final Map<String, Map<String, String>> _localizedValues = {
'en': {
'appTitle': 'Flutter Internationalization Demo',
'welcome': 'Welcome to Flutter!',
'login': 'Login',
'logout': 'Logout',
'settings': 'Settings',
'language': 'Language',
'theme': 'Theme',
'darkMode': 'Dark Mode',
'lightMode': 'Light Mode',
'systemMode': 'System Mode',
'changeLanguage': 'Change Language',
'currentLanguage': 'Current Language',
'english': 'English',
'chinese': 'Chinese',
'japanese': 'Japanese',
'korean': 'Korean',
'home': 'Home',
'profile': 'Profile',
'messages': 'Messages',
'notifications': 'Notifications',
'search': 'Search',
'submit': 'Submit',
'cancel': 'Cancel',
'save': 'Save',
'delete': 'Delete',
'edit': 'Edit',
'view': 'View',
'loading': 'Loading...',
'error': 'An error occurred',
'success': 'Operation successful',
'warning': 'Warning',
'info': 'Information',
'confirm': 'Confirm',
'back': 'Back',
'next': 'Next',
'previous': 'Previous',
'close': 'Close',
'open': 'Open',
'yes': 'Yes',
'no': 'No',
'ok': 'OK',
'retry': 'Retry',
'skip': 'Skip',
'continue': 'Continue',
'finished': 'Finished',
'start': 'Start',
'stop': 'Stop',
'pause': 'Pause',
'resume': 'Resume',
},
'zh': {
'appTitle': 'Flutter国际化示例',
'welcome': '欢迎使用Flutter!',
'login': '登录',
'logout': '退出登录',
'settings': '设置',
'language': '语言',
'theme': '主题',
'darkMode': '暗色模式',
'lightMode': '亮色模式',
'systemMode': '系统模式',
'changeLanguage': '切换语言',
'currentLanguage': '当前语言',
'english': '英语',
'chinese': '中文',
'japanese': '日语',
'korean': '韩语',
'home': '首页',
'profile': '个人资料',
'messages': '消息',
'notifications': '通知',
'search': '搜索',
'submit': '提交',
'cancel': '取消',
'save': '保存',
'delete': '删除',
'edit': '编辑',
'view': '查看',
'loading': '加载中...',
'error': '发生错误',
'success': '操作成功',
'warning': '警告',
'info': '信息',
'confirm': '确认',
'back': '返回',
'next': '下一步',
'previous': '上一步',
'close': '关闭',
'open': '打开',
'yes': '是',
'no': '否',
'ok': '确定',
'retry': '重试',
'skip': '跳过',
'continue': '继续',
'finished': '完成',
'start': '开始',
'stop': '停止',
'pause': '暂停',
'resume': '恢复',
},
'ja': {
'appTitle': 'Flutter国際化デモ',
'welcome': 'Flutterへようこそ！',
'login': 'ログイン',
'logout': 'ログアウト',
'settings': '設定',
'language': '言語',
'theme': 'テーマ',
'darkMode': 'ダークモード',
'lightMode': 'ライトモード',
'systemMode': 'システムモード',
'changeLanguage': '言語を切り替える',
'currentLanguage': '現在の言語',
'english': '英語',
'chinese': '中国語',
'japanese': '日本語',
'korean': '韓国語',
'home': 'ホーム',
'profile': 'プロフィール',
'messages': 'メッセージ',
'notifications': '通知',
'search': '検索',
'submit': '送信',
'cancel': 'キャンセル',
'save': '保存',
'delete': '削除',
'edit': '編集',
'view': '表示',
'loading': '読み込み中...',
'error': 'エラーが発生しました',
'success': '操作が成功しました',
'warning': '警告',
'info': '情報',
'confirm': '確認',
'back': '戻る',
'next': '次へ',
'previous': '前へ',
'close': '閉じる',
'open': '開く',
'yes': 'はい',
'no': 'いいえ',
'ok': 'OK',
'retry': '再試行',
'skip': 'スキップ',
'continue': '続行',
'finished': '完了',
'start': '開始',
'stop': '停止',
'pause': '一時停止',
'resume': '再開',
},
'ko': {
'appTitle': 'Flutter 국제화 데모',
'welcome': 'Flutter에 오신 것을 환영합니다!',
'login': '로그인',
'logout': '로그아웃',
'settings': '설정',
'language': '언어',
'theme': '테마',
'darkMode': '다크 모드',
'lightMode': '라이트 모드',
'systemMode': '시스템 모드',
'changeLanguage': '언어 변경',
'currentLanguage': '현재 언어',
'english': '영어',
'chinese': '중국어',
'japanese': '일본어',
'korean': '한국어',
'home': '홈',
'profile': '프로필',
'messages': '메시지',
'notifications': '알림',
'search': '검색',
'submit': '제출',
'cancel': '취소',
'save': '저장',
'delete': '삭제',
'edit': '편집',
'view': '보기',
'loading': '로딩 중...',
'error': '오류가 발생했습니다',
'success': '작업이 성공했습니다',
'warning': '경고',
'info': '정보',
'confirm': '확인',
'back': '뒤로',
'next': '다음',
'previous': '이전',
'close': '닫기',
'open': '열기',
'yes': '예',
'no': '아니오',
'ok': '확인',
'retry': '재시도',
'skip': '건너뛰기',
'continue': '계속',
'finished': '완료',
'start': '시작',
'stop': '중지',
'pause': '일시 정지',
'resume': '재개',
},
};
// 获取本地化文本
String? _getText(String key) {
if (_localizedValues.containsKey(locale.toString())) {
return _localizedValues[locale.toString()]![key];
}
if (_localizedValues.containsKey(locale.languageCode)) {
return _localizedValues[locale.languageCode]![key];
}
// 兜底
return _localizedValues['en']![key];
}
// getter方法
String get appTitle => _getText('appTitle')!;
String get welcome => _getText('welcome')!;
String get login => _getText('login')!;
String get logout => _getText('logout')!;
String get settings => _getText('settings')!;
String get language => _getText('language')!;
String get theme => _getText('theme')!;
String get darkMode => _getText('darkMode')!;
String get lightMode => _getText('lightMode')!;
String get systemMode => _getText('systemMode')!;
String get changeLanguage => _getText('changeLanguage')!;
String get currentLanguage => _getText('currentLanguage')!;
String get english => _getText('english')!;
String get chinese => _getText('chinese')!;
String get japanese => _getText('japanese')!;
String get korean => _getText('korean')!;
String get home => _getText('home')!;
String get profile => _getText('profile')!;
String get messages => _getText('messages')!;
String get notifications => _getText('notifications')!;
String get search => _getText('search')!;
String get submit => _getText('submit')!;
String get cancel => _getText('cancel')!;
String get save => _getText('save')!;
String get delete => _getText('delete')!;
String get edit => _getText('edit')!;
String get view => _getText('view')!;
String get loading => _getText('loading')!;
String get error => _getText('error')!;
String get success => _getText('success')!;
String get warning => _getText('warning')!;
String get info => _getText('info')!;
String get confirm => _getText('confirm')!;
String get back => _getText('back')!;
String get next => _getText('next')!;
String get previous => _getText('previous')!;
String get close => _getText('close')!;
String get open => _getText('open')!;
String get yes => _getText('yes')!;
String get no => _getText('no')!;
String get ok => _getText('ok')!;
String get retry => _getText('retry')!;
String get skip => _getText('skip')!;
String get continueText => _getText('continue')!;
String get finished => _getText('finished')!;
String get start => _getText('start')!;
String get stop => _getText('stop')!;
String get pause => _getText('pause')!;
String get resume => _getText('resume')!;
// 携带参数
String welcomeUser(String username) {
// 根据不同语言调整格式
switch (locale.languageCode) {
case 'zh':
return '欢迎, $username!';
case 'ja':
return 'ようこそ、$usernameさん！';
case 'ko':
return '환영합니다, $username님!';
default:
return 'Welcome, $username!';
}
}
// 数字格式化
String formatNumber(int number) {
final formatter = NumberFormat.decimalPattern(locale.toString());
return formatter.format(number);
}
// 货币格式化
String formatCurrency(double amount) {
final formatter = NumberFormat.currency(
locale: locale.toString(),
symbol: _getCurrencySymbol(locale.languageCode),
);
return formatter.format(amount);
}
String _getCurrencySymbol(String languageCode) {
switch (languageCode) {
case 'zh':
return '¥';
case 'ja':
return '¥';
case 'ko':
return '₩';
default:
return '\$';
}
}
// 日期格式化
String formatDate(DateTime date) {
final formatter = DateFormat.yMMMMd(locale.toString());
return formatter.format(date);
}
// 时间格式化
String formatRelativeTime(DateTime date) {
final now = DateTime.now();
final difference = now.difference(date);
if (difference.inDays > 0) {
return _pluralize(difference.inDays, 'day', 'days');
} else if (difference.inHours > 0) {
return _pluralize(difference.inHours, 'hour', 'hours');
} else if (difference.inMinutes > 0) {
return _pluralize(difference.inMinutes, 'minute', 'minutes');
} else {
return _getText('justNow') ?? 'Just now';
}
}
String _pluralize(int count, String singular, String plural) {
// 简单处理
if (count == 1) {
return '$count $singular';
} else {
return '$count $plural';
}
}
}
步骤3：配置MaterialApp
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '国际化',
// 支持的语言列表
supportedLocales: const [
Locale('en', 'US'), // 英文
Locale('zh', 'CN'), // 中文
Locale('ja', 'JP'), // 日文
Locale('ko', 'KR'), // 韩文
],
// 本地化代理
localizationsDelegates: const [
AppLocalizationsDelegate(), // 自定义代理
GlobalMaterialLocalizations.delegate, // Material组件本地化
GlobalWidgetsLocalizations.delegate, // Widget文本本地化
GlobalCupertinoLocalizations.delegate, // iOS风格组件本地化
],
// 找不到对应语言时的回退语言
localeResolutionCallback: (locale, supportedLocales) {
// 检查支持的语言
for (var supportedLocale in supportedLocales) {
if (supportedLocale.languageCode == locale?.languageCode) {
return supportedLocale;
}
}
// 默认英语
return const Locale('en', 'US');
},
home: const HomePage(),
);
}
}
3.3 语言管理器
// lib/providers/language_manager.dart
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
// 语言管理器
class LanguageManager with ChangeNotifier {
Locale _locale = const Locale('zh', 'CN');
Locale get locale => _locale;
// 切换语言
Future<void> switchLanguage(Locale newLocale) async {
_locale = newLocale;
// 保存到本地存储
final prefs = await SharedPreferences.getInstance();
await prefs.setString('language_code', newLocale.languageCode);
if (newLocale.countryCode != null) {
await prefs.setString('country_code', newLocale.countryCode!);
}
// 通知监听者
notifyListeners();
}
// 从本地存储加载语言设置
Future<void> loadLanguageFromPrefs() async {
final prefs = await SharedPreferences.getInstance();
final languageCode = prefs.getString('language_code');
final countryCode = prefs.getString('country_code');
if (languageCode != null) {
_locale = Locale(languageCode, countryCode);
notifyListeners();
}
}
// 获取支持的语言列表
List<Map<String, dynamic>> get supportedLanguages => [
{
'code': 'zh',
'country': 'CN',
'name': '中文',
'nativeName': '中文',
'flag': '🇨🇳',
},
{
'code': 'en',
'country': 'US',
'name': 'English',
'nativeName': 'English',
'flag': '🇺🇸',
},
{
'code': 'ja',
'country': 'JP',
'name': 'Japanese',
'nativeName': '日本語',
'flag': '🇯🇵',
},
{
'code': 'ko',
'country': 'KR',
'name': 'Korean',
'nativeName': '한국어',
'flag': '🇰🇷',
},
];
// 获取当前语言的显示名称
String get currentLanguageName {
final lang = supportedLanguages.firstWhere(
(lang) => lang['code'] == _locale.languageCode,
orElse: () => supportedLanguages.first,
);
return lang['name'];
}
}
// 在应用入口配置
void main() async {
WidgetsFlutterBinding.ensureInitialized();
final languageManager = LanguageManager();
final themeManager = ThemeManager();
// 加载保存的设置
await Future.wait([
languageManager.loadLanguageFromPrefs(),
themeManager.loadThemeFromPrefs(),
]);
runApp(
MultiProvider(
providers: [
ChangeNotifierProvider.value(value: languageManager),
ChangeNotifierProvider.value(value: themeManager),
],
child: const MyApp(),
),
);
}
// 更新MyApp以支持动态语言切换
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
final languageManager = Provider.of<LanguageManager>(context);
final themeManager = Provider.of<ThemeManager>(context);
return MaterialApp(
title: 'Flutter国际化',
theme: themeManager.currentTheme,
// 使用动态locale
locale: languageManager.locale,
supportedLocales: const [
Locale('en', 'US'),
Locale('zh', 'CN'),
Locale('ja', 'JP'),
Locale('ko', 'KR'),
],
localizationsDelegates: const [
AppLocalizationsDelegate(),
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
localeResolutionCallback: (locale, supportedLocales) {
return languageManager.locale;
},
home: const HomePage(),
);
}
}
3.4 语言切换界面
class LanguageSettingsPage extends StatelessWidget {
const LanguageSettingsPage({super.key});
@override
Widget build(BuildContext context) {
final languageManager = Provider.of<LanguageManager>(context);
final localizations = AppLocalizations.of(context)!;
return Scaffold(
appBar: AppBar(
title: Text(localizations.language),
),
body: ListView(
padding: const EdgeInsets.all(16),
children: [
// 当前语言显示
Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
localizations.currentLanguage,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
Text(
languageManager.currentLanguageName,
style: const TextStyle(fontSize: 18),
),
],
),
),
),
const SizedBox(height: 24),
// 语言选择列表
Card(
child: Padding(
padding: const EdgeInsets.all(8),
child: Column(
children: languageManager.supportedLanguages.map((language) {
return ListTile(
leading: Text(
language['flag'],
style: const TextStyle(fontSize: 24),
),
title: Text(language['nativeName']),
subtitle: Text(language['name']),
trailing: language['code'] == languageManager.locale.languageCode
? const Icon(Icons.check, color: Colors.blue)
: null,
onTap: () {
languageManager.switchLanguage(
Locale(language['code'], language['country']),
);
},
);
}).toList(),
),
),
),
const SizedBox(height: 32),
// 国际化功能
_buildLocalizationDemo(context),
],
),
);
}
Widget _buildLocalizationDemo(BuildContext context) {
final localizations = AppLocalizations.of(context)!;
final now = DateTime.now();
final yesterday = now.subtract(const Duration(days: 1));
return Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'国际化功能',
style: Theme.of(context).textTheme.titleLarge,
),
const SizedBox(height: 16),
// 文本
_buildDemoItem('普通文本', localizations.welcome),
_buildDemoItem('带参数文本', localizations.welcomeUser('xx')),
_buildDemoItem('按钮文本', localizations.submit),
const SizedBox(height: 16),
// 数字格式化
_buildDemoItem('数字格式化', localizations.formatNumber(1234567)),
_buildDemoItem('货币格式化', localizations.formatCurrency(1234.56)),
const SizedBox(height: 16),
// 日期格式化
_buildDemoItem('日期格式化', localizations.formatDate(now)),
_buildDemoItem('相对时间', localizations.formatRelativeTime(yesterday)),
],
),
),
);
}
Widget _buildDemoItem(String label, String value) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
label,
style: const TextStyle(
fontSize: 12,
color: Colors.grey,
),
),
const SizedBox(height: 4),
Text(
value,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
],
),
);
}
}
3.5 在Widget中使用国际化
class InternationalizedWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 获取本地化实例
final localizations = AppLocalizations.of(context)!;
return Scaffold(
appBar: AppBar(
title: Text(localizations.appTitle),
actions: [
IconButton(
icon: const Icon(Icons.language),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const LanguageSettingsPage(),
),
);
},
),
],
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
localizations.welcome,
style: const TextStyle(fontSize: 24),
),
const SizedBox(height: 20),
// 使用本地化文本
ElevatedButton(
onPressed: () {},
child: Text(localizations.login),
),
const SizedBox(height: 10),
OutlinedButton(
onPressed: () {},
child: Text(localizations.settings),
),
const SizedBox(height: 10),
TextButton(
onPressed: () {
// 显示本地化提示
_showLocalizedDialog(context);
},
child: Text(localizations.info),
),
const SizedBox(height: 30),
// 显示格式化数据
Text(
'${localizations.currentLanguage}: ${localizations.formatNumber(1234)}',
style: const TextStyle(fontSize: 16),
),
],
),
),
);
}
void _showLocalizedDialog(BuildContext context) {
final localizations = AppLocalizations.of(context)!;
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text(localizations.info),
content: Text(localizations.welcomeUser('Flutter开发者')),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text(localizations.close),
),
TextButton(
onPressed: () {
Navigator.pop(context);
// ...
},
child: Text(localizations.confirm),
),
],
),
);
}
}
四、使用技巧
4.1 主题与国际化结合实践
创建配置管理器
// 统一的应用配置管理器
class AppConfigManager with ChangeNotifier {
final ThemeManager _themeManager;
final LanguageManager _languageManager;
AppConfigManager({
required ThemeManager themeManager,
required LanguageManager languageManager,
}) : _themeManager = themeManager,
_languageManager = languageManager;
// 同时切换主题和语言
Future<void> switchToPreset(String presetName) async {
switch (presetName) {
case 'light_chinese':
await _themeManager.switchTheme(ThemeModeType.light);
await _languageManager.switchLanguage(const Locale('zh', 'CN'));
break;
case 'dark_english':
await _themeManager.switchTheme(ThemeModeType.dark);
await _languageManager.switchLanguage(const Locale('en', 'US'));
break;
// 这里还可以添加其他设置...
}
notifyListeners();
}
// 导出当前配置
Map<String, dynamic> exportConfig() {
return {
'theme': _themeManager.themeMode.name,
'language': _languageManager.locale.toString(),
'timestamp': DateTime.now().toIso8601String(),
};
}
// 导入配置
Future<void> importConfig(Map<String, dynamic> config) async {
// 解析并应用配置...
notifyListeners();
}
}
4.2 性能优化
按需加载语言资源
// 懒加载
class LazyAppLocalizations {
static final Map<String, Future<Map<String, String>>> _resourceCache = {};
static Future<Map<String, String>> _loadResources(String languageCode) async {
// 接口调用
await Future.delayed(const Duration(milliseconds: 100));
return {
'welcome': _getWelcomeText(languageCode),
// ...
};
}
static Future<Map<String, String>> getResources(String languageCode) {
if (!_resourceCache.containsKey(languageCode)) {
_resourceCache[languageCode] = _loadResources(languageCode);
}
return _resourceCache[languageCode]!;
}
static String _getWelcomeText(String languageCode) {
switch (languageCode) {
case 'zh': return '欢迎';
case 'en': return 'Welcome';
default: return 'Welcome';
}
}
}
主题缓存
// 缓存
class ThemeCache {
static final Map<String, ThemeData> _themeCache = {};
static ThemeData getOrCreateTheme({
required Color primaryColor,
required Brightness brightness,
}) {
final key = '${primaryColor.value}_${brightness.name}';
if (!_themeCache.containsKey(key)) {
_themeCache[key] = ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: primaryColor,
brightness: brightness,
),
useMaterial3: true,
);
}
return _themeCache[key]!;
}
}
4.3 测试策略
主题测试
// 主题
void testThemeSwitching() {
final themeManager = ThemeManager();
// 测试初始状态
assert(themeManager.themeMode == ThemeModeType.system);
// 测试切换主题
themeManager.switchTheme(ThemeModeType.dark);
assert(themeManager.themeMode == ThemeModeType.dark);
// 测试自定义主题
final customTheme = ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),
);
themeManager.setCustomTheme(customTheme);
assert(themeManager.themeMode == ThemeModeType.custom);
}
// Widget测试
void testThemedWidget() {
testWidgets('Widget使用正确的主题颜色', (WidgetTester tester) async {
await tester.pumpWidget(
MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
),
home: ThemedWidget(),
),
);
// 验证Widget使用了主题颜色
final container = tester.widget<Container>(
find.byType(Container).first,
);
final boxDecoration = container.decoration as BoxDecoration;
});
}
五、创建设置页面案例
// 整合主题和国际化的设置页面
class SettingsPage extends StatefulWidget {
const SettingsPage({super.key});
@override
State<SettingsPage> createState() => _SettingsPageState();
}
class _SettingsPageState extends State<SettingsPage> {
@override
Widget build(BuildContext context) {
final localizations = AppLocalizations.of(context)!;
return Scaffold(
appBar: AppBar(
title: Text(localizations.settings),
),
body: ListView(
children: [
// 用户信息
_buildUserSection(context),
// 主题设置
_buildThemeSection(context),
// 语言设置
_buildLanguageSection(context),
// 其他设置
_buildOtherSettings(context),
// 导出/导入配置
_buildConfigManagement(context),
],
),
);
}
Widget _buildUserSection(BuildContext context) {
final localizations = AppLocalizations.of(context)!;
return Card(
margin: const EdgeInsets.all(16),
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
const CircleAvatar(
radius: 30,
backgroundImage: NetworkImage('https://via.placeholder.com/150'),
),
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'祁厅长',
style: Theme.of(context).textTheme.titleLarge,
),
const SizedBox(height: 4),
Text(
'developer@example.com',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Colors.grey,
),
),
],
),
),
IconButton(
icon: const Icon(Icons.edit),
onPressed: () {
// 编辑资料
},
),
],
),
),
);
}
Widget _buildThemeSection(BuildContext context) {
final themeManager = Provider.of<ThemeManager>(context);
final localizations = AppLocalizations.of(context)!;
return Card(
margin: const EdgeInsets.symmetric(horizontal: 16),
child: ExpansionTile(
leading: const Icon(Icons.color_lens),
title: Text(localizations.theme),
children: [
Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
// 主题模式选择
_buildThemeModeSelector(themeManager, localizations),
const SizedBox(height: 16),
// 颜色选择器
_buildColorSelector(themeManager),
const SizedBox(height: 16),
// 高级设置
_buildAdvancedThemeSettings(themeManager, localizations),
],
),
),
],
),
);
}
Widget _buildThemeModeSelector(
ThemeManager themeManager,
AppLocalizations localizations,
) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'主题模式',
style: Theme.of(context).textTheme.titleMedium,
),
const SizedBox(height: 8),
SegmentedButton<ThemeModeType>(
segments: [
ButtonSegment(
value: ThemeModeType.light,
label: Text(localizations.lightMode),
icon: const Icon(Icons.light_mode),
),
ButtonSegment(
value: ThemeModeType.dark,
label: Text(localizations.darkMode),
icon: const Icon(Icons.dark_mode),
),
ButtonSegment(
value: ThemeModeType.system,
label: Text(localizations.systemMode),
icon: const Icon(Icons.settings),
),
],
selected: {themeManager.themeMode},
onSelectionChanged: (Set<ThemeModeType> newSelection) {
themeManager.switchTheme(newSelection.first);
},
),
],
);
}
Widget _buildColorSelector(ThemeManager themeManager) {
final colors = [
Colors.blue,
Colors.green,
Colors.red,
Colors.purple,
Colors.orange,
Colors.teal,
];
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'主题色',
style: Theme.of(context).textTheme.titleMedium,
),
const SizedBox(height: 8),
Wrap(
spacing: 12,
runSpacing: 12,
children: colors.map((color) {
return GestureDetector(
onTap: () {
final isDark = themeManager.themeMode == ThemeModeType.dark;
if (isDark) {
themeManager.updateDarkTheme(
ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: color,
brightness: Brightness.dark,
),
),
);
} else {
themeManager.updateLightTheme(
ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: color,
brightness: Brightness.light,
),
),
);
}
},
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: color,
shape: BoxShape.circle,
border: Border.all(
color: Theme.of(context).colorScheme.outline,
width: 2,
),
),
),
);
}).toList(),
),
],
);
}
Widget _buildAdvancedThemeSettings(
ThemeManager themeManager,
AppLocalizations localizations,
) {
return ExpansionTile(
title: const Text('高级设置'),
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Column(
children: [
// 圆角设置
_buildSliderSetting(
'圆角大小',
0.0,
24.0,
(value) {
// 更新主题圆角
},
),
// 阴影强度
_buildSliderSetting(
'阴影强度',
0.0,
10.0,
(value) {
// 更新阴影
},
),
// 动画速度
_buildSliderSetting(
'动画速度',
0.5,
2.0,
(value) {
// 更新动画速度
},
),
],
),
),
],
);
}
Widget _buildSliderSetting(
String label,
double min,
double max,
ValueChanged<double> onChanged,
) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(label),
Slider(
value: (min + max) / 2,
min: min,
max: max,
onChanged: onChanged,
),
],
),
);
}
Widget _buildLanguageSection(BuildContext context) {
final languageManager = Provider.of<LanguageManager>(context);
final localizations = AppLocalizations.of(context)!;
return Card(
margin: const EdgeInsets.all(16),
child: ListTile(
leading: const Icon(Icons.language),
title: Text(localizations.language),
subtitle: Text(languageManager.currentLanguageName),
trailing: const Icon(Icons.chevron_right),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const LanguageSettingsPage(),
),
);
},
),
);
}
Widget _buildOtherSettings(BuildContext context) {
final localizations = AppLocalizations.of(context)!;
return Card(
margin: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
children: [
ListTile(
leading: const Icon(Icons.notifications),
title: Text(localizations.notifications),
trailing: Switch(
value: true,
onChanged: (value) {},
),
),
const Divider(height: 1),
ListTile(
leading: const Icon(Icons.security),
title: const Text('隐私设置'),
trailing: const Icon(Icons.chevron_right),
onTap: () {},
),
const Divider(height: 1),
ListTile(
leading: const Icon(Icons.help),
title: const Text('帮助与反馈'),
trailing: const Icon(Icons.chevron_right),
onTap: () {},
),
const Divider(height: 1),
ListTile(
leading: const Icon(Icons.info),
title: const Text('关于我们'),
trailing: const Icon(Icons.chevron_right),
onTap: () {},
),
],
),
);
}
Widget _buildConfigManagement(BuildContext context) {
return Card(
margin: const EdgeInsets.all(16),
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
const Text(
'配置管理',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 16),
Row(
children: [
Expanded(
child: OutlinedButton.icon(
icon: const Icon(Icons.upload),
label: const Text('导出配置'),
onPressed: () {
_exportConfig(context);
},
),
),
const SizedBox(width: 16),
Expanded(
child: OutlinedButton.icon(
icon: const Icon(Icons.download),
label: const Text('导入配置'),
onPressed: () {
_importConfig(context);
},
),
),
],
),
const SizedBox(height: 8),
OutlinedButton.icon(
icon: const Icon(Icons.restore),
label: const Text('恢复默认设置'),
onPressed: () {
_resetToDefaults(context);
},
),
],
),
),
);
}
void _exportConfig(BuildContext context) {
// 导出配置逻辑
showDialog(
context: context,
builder: (context) => AlertDialog(
title: const Text('导出配置'),
content: const Text('配置已复制到剪贴板'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('确定'),
),
],
),
);
}
void _importConfig(BuildContext context) {
// 导入配置逻辑
showDialog(
context: context,
builder: (context) => AlertDialog(
title: const Text('导入配置'),
content: const Text('请粘贴配置JSON'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('取消'),
),
TextButton(
onPressed: () {
// 导入配置
Navigator.pop(context);
},
child: const Text('导入'),
),
],
),
);
}
void _resetToDefaults(BuildContext context) {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: const Text('恢复默认设置'),
content: const Text('确定要恢复所有设置为默认值吗？'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('取消'),
),
TextButton(
onPressed: () {
// 恢复
Navigator.pop(context);
},
child: const Text('确定'),
),
],
),
);
}
}
总结
至此主题与国际化相关知识点就介绍完了，通过本节内容的学习，我们掌握了以下核心知识点：主题系统，动态主题切换，国际化
实际开发建议
-
渐进式实现：如果项目已经开发到一半，可以从基础的主题配置开始，逐步添加国际化支持。
-
设计系统先行：在项目初期就建立完整的设计系统（Design System），包括颜色、字体、间距等规范。
-
保持一致性：确保整个应用使用统一的主题和国际化方案，避免混合使用不同方案。
-
用户体验优先：主题切换和语言切换应该流畅自然，提供良好的视觉效果。
OK！有任何问题或建议，欢迎在评论区留言讨论！让我们一起在Flutter全栈开发的道路上不断进步！
