Flutter Web 开发环境搭建

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。### # Flutter 实现 Web 应用的开发与优化

Flutter 是由 Google 开发的跨平台 UI 框架，自 2019 年正式支持 Web 平台后，开发者可以使用同一套代码库构建移动端、桌面端和 Web 端应用。这种"一次编写，多端运行"的特性显著提升了开发效率，特别适合需要快速迭代或跨平台发布的项目。以下将详细介绍 Flutter Web 的开发流程、优化技巧及实用代码示例。

Flutter Web 开发环境搭建

系统要求

• 操作系统：Windows 10/11、macOS 或 Linux
• 磁盘空间：至少 2.8GB 可用空间（包含 IDE 和 SDK）
• 工具链：Git、Chrome 浏览器（用于调试）

详细安装步骤

# 切换到稳定版通道
flutter channel stable
# 升级 Flutter
flutter upgrade
# 启用 Web 支持
flutter config –enable-web
# 验证安装
flutter doctor

项目创建与运行

创建新项目或为现有项目添加 Web 支持：

# 创建新项目
flutter create my_web_app
cd my_web_app
# 运行 Web 应用（默认使用 Chrome）
flutter run -d chrome
# 或者指定端口
flutter run -d chrome –web-port 5000

Flutter Web 基础代码示例

以下是一个完整的 Flutter Web 应用示例，包含状态管理和主题切换功能：

import 'package:flutter/material.dart';

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

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

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Web Demo',
theme: ThemeData.light().copyWith(
primaryColor: Colors.blue,
appBarTheme: const AppBarTheme(
elevation: 0,
centerTitle: true,
),
),
darkTheme: ThemeData.dark(),
themeMode: ThemeMode.system,
home: const MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Web Counter'),
actions: [
IconButton(
icon: const Icon(Icons.info),
onPressed: () {
showAboutDialog(
context: context,
applicationName: 'Flutter Web Demo',
applicationVersion: '1.0.0',
);
},
),
],
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'You have pushed the button this many times:',
style: TextStyle(fontSize: 16),
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}

Flutter Web 的响应式设计

响应式布局策略

完整响应式示例

import 'package:flutter/material.dart';

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

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Responsive Design')),
body: LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth > 1024) {
return _buildDesktopLayout();
} else if (constraints.maxWidth > 600) {
return _buildTabletLayout();
} else {
return _buildMobileLayout();
}
},
),
);
}

Widget _buildDesktopLayout() {
return GridView.count(
crossAxisCount: 3,
children: List.generate(9, (index) => _buildCard(index)),
);
}

Widget _buildTabletLayout() {
return GridView.count(
crossAxisCount: 2,
children: List.generate(6, (index) => _buildCard(index)),
);
}

Widget _buildMobileLayout() {
return ListView(
children: List.generate(3, (index) => _buildCard(index)),
);
}

Widget _buildCard(int index) {
return Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
Icon(Icons.star, size: 50),
Text('Item $index', style: TextStyle(fontSize: 24)),
],
),
),
);
}
}

Flutter Web 性能优化

构建优化

详细构建命令

# 生产环境构建（默认使用 html 渲染器）
flutter build web –release

# 启用所有优化选项
flutter build web –release \\
–tree-shake-icons \\
–source-maps \\
–pwa-strategy offline-first \\
–web-renderer canvaskit \\
–dart-define=FLUTTER_WEB_USE_SKIA=true

渲染模式选择

# 强制使用特定渲染器
flutter run -d chrome –web-renderer canvaskit
flutter build web –web-renderer html

其他优化技巧

Flutter Web 路由与导航

路由管理方案对比

go_router 详细示例

# pubspec.yaml
dependencies:
go_router: ^5.0.0

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

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

final router = GoRouter(
routes: [
GoRoute(
path: '/',
builder: (context, state) => const HomePage(),
routes: [
GoRoute(
path: 'details/:id',
builder: (context, state) {
final id = state.params['id']!;
return DetailsPage(id: id);
},
),
GoRoute(
path: 'profile',
builder: (context, state) => const ProfilePage(),
redirect: (context, state) {
// 示例：登录检查
final isLoggedIn = false; // 替换为实际检查逻辑
return isLoggedIn ? null : '/login';
},
),
GoRoute(
path: 'login',
builder: (context, state) => const LoginPage(),
),
],
),
],
errorBuilder: (context, state) => const NotFoundPage(),
redirect: (context, state) {
// 全局重定向逻辑
return null;
},
);

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

@override
Widget build(BuildContext context) {
return MaterialApp.router(
routerConfig: router,
title: 'GoRouter Example',
theme: ThemeData(primarySwatch: Colors.blue),
debugShowCheckedModeBanner: false,
);
}
}

// 页面组件实现…

Flutter Web 与后端 API 交互

网络请求最佳实践

完整 HTTP 示例

# pubspec.yaml
dependencies:
http: ^0.13.4
provider: ^6.0.0

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:provider/provider.dart';

class ApiService {
final String baseUrl = 'https://api.example.com';

Future<List<Post>> fetchPosts() async {
final response = await http.get(Uri.parse('$baseUrl/posts'));
if (response.statusCode == 200) {
return postFromJson(response.body);
} else {
throw ApiException('Failed to load posts', response.statusCode);
}
}
}

class ApiException implements Exception {
final String message;
final int statusCode;

ApiException(this.message, this.statusCode);

@override
String toString() => 'ApiException: $message (Status: $statusCode)';
}

class Post {
final int id;
final String title;
final String body;

Post({required this.id, required this.title, required this.body});

factory Post.fromJson(Map<String, dynamic> json) {
return Post(
id: json['id'],
title: json['title'],
body: json['body'],
);
}
}

List<Post> postFromJson(String str) {
final data = json.decode(str);
return List<Post>.from(data.map((x) => Post.fromJson(x)));
}

class PostProvider with ChangeNotifier {
final ApiService _apiService = ApiService();
List<Post> _posts = [];
bool _isLoading = false;
String? _error;

List<Post> get posts => _posts;
bool get isLoading => _isLoading;
String? get error => _error;

Future<void> loadPosts() async {
_isLoading = true;
notifyListeners();

try {
_posts = await _apiService.fetchPosts();
_error = null;
} on ApiException catch (e) {
_error = e.toString();
} finally {
_isLoading = false;
notifyListeners();
}
}
}

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

@override
Widget build(BuildContext context) {
final postProvider = Provider.of<PostProvider>(context);

if (postProvider.isLoading) {
return const Center(child: CircularProgressIndicator());
}

if (postProvider.error != null) {
return Center(child: Text(postProvider.error!));
}

return ListView.builder(
itemCount: postProvider.posts.length,
itemBuilder: (context, index) {
final post = postProvider.posts[index];
return ListTile(
title: Text(post.title),
subtitle: Text(post.body),
onTap: () {
// 导航到详情页
},
);
},
);
}
}

void main() {
runApp(
ChangeNotifierProvider(
create: (context) => PostProvider()..loadPosts(),
child: MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('API Example')),
body: const PostListScreen(),
),
),
),
);
}

Flutter Web 的部署

部署选项对比

详细部署流程

常见问题与解决方案

性能问题

问题：首次加载时间过长 解决方案：

• 使用 –web-renderer html 减小初始包体积
• 实现加载进度指示器
• 启用预缓存策略

// 在 main.dart 中添加加载动画
void main() {
runApp(
MaterialApp(
home: FutureBuilder(
future: Future.delayed(const Duration(seconds: 2)),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return const MyApp();
}
return const Scaffold(
body: Center(child: CircularProgressIndicator()),
);
},
),
),
);
}

路由问题

问题：刷新页面后显示 404 解决方案：

• 配置服务器将所有路由重定向到 index.html
• Nginx 示例：location / {
  try_files $uri $uri/ /index.html;
  }

CORS 问题

问题：API 请求被浏览器阻止 解决方案：

字体渲染问题

问题：文本显示模糊 解决方案：

• 使用 canvaskit 渲染器
• 明确指定字体：TextStyle(
  fontFamily: 'Roboto',
  fontSize: 16,
  fontWeight: FontWeight.normal,
  )

响应式布局问题

问题：桌面端显示移动布局 解决方案：

• 使用 MediaQuery 和 LayoutBuilder
• 定义断点常量：class Breakpoints {
  static const double mobile = 600;
  static const double tablet = 1024;
  }

  bool get isMobile => MediaQuery.of(context).size.width < Breakpoints.mobile;

通过以上全面的开发指南和优化策略，开发者可以构建高性能、跨平台的 Flutter Web 应用，实现真正的代码复用和高效的开发流程。欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。