Flutter Web 混合开发：构建跨平台 Web 应用

2. web/manifest.json

{
"name": "My Flutter Web App",
"short_name": "My App",
"start_url": ".",
"display": "standalone",
"background_color": "#667eea",
"theme_color": "#667eea",
"description": "A Flutter Web application",
"orientation": "portrait-primary",
"prefer_related_applications": false,
"icons": [
{
"src": "icons/Icon-192.png",
"sizes": "192x192"
},
{
"src": "icons/Icon-512.png",
"sizes": "512x512"
}
]
}

Web 特定功能

1. 响应式布局

import 'package:flutter/material.dart';

class ResponsiveLayout extends StatelessWidget {
const ResponsiveLayout({super.key});
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return const MobileLayout();
} else if (constraints.maxWidth < 1200) {
return const TabletLayout();
} else {
return const DesktopLayout();
}
},
);
}
}

class MobileLayout extends StatelessWidget {
const MobileLayout({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('移动端布局')),
body: const Center(child: Text('这是移动端布局')),
);
}
}

class TabletLayout extends StatelessWidget {
const TabletLayout({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('平板布局')),
body: const Center(child: Text('这是平板布局')),
);
}
}

class DesktopLayout extends StatelessWidget {
const DesktopLayout({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('桌面端布局')),
body: const Center(child: Text('这是桌面端布局')),
);
}
}

2. 浏览器导航

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

void main() {
// 使用路径 URL 策略（移除 URL 中的 #）
setUrlStrategy(PathUrlStrategy());
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Web',
theme: ThemeData(primarySwatch: Colors.blue),
initialRoute: '/',
routes: {
'/': (context) => const HomePage(),
'/about': (context) => const AboutPage(),
'/contact': (context) => const ContactPage(),
},
);
}
}

3. 与 JavaScript 交互

import 'dart:js' as js;
import 'dart:html' as html;

class JsInteropExample {
// 调用 JavaScript 函数
static void callJsFunction() {
js.context.callMethod('alert', ['Hello from Flutter!']);
}

// 获取 JavaScript 变量
static dynamic getJsVariable(String name) {
return js.context[name];
}

// 设置 JavaScript 变量
static void setJsVariable(String name, dynamic value) {
js.context[name] = value;
}

// 调用 JavaScript 对象的方法
static void callJsObjectMethod() {
final obj = js.JsObject.jsify({
'name': 'Flutter',
'greet': (name) => 'Hello, $name!',
});
final result = obj.callMethod('greet', ['World']);
print(result); // Hello, World!
}

// 使用 HTML5 API
static void useHtml5Api() {
// 获取当前 URL
final url = html.window.location.href;
print('Current URL: $url');
// 跳转到新页面
html.window.location.href = 'https://flutter.dev';
// 获取本地存储
final storage = html.window.localStorage;
storage['key'] = 'value';
final value = storage['key'];
// 获取浏览器信息
final userAgent = html.window.navigator.userAgent;
print('User Agent: $userAgent');
}
}

4. PWA 支持

import 'dart:html' as html;

class PwaService {
// 检查是否支持 Service Worker
static bool get isServiceWorkerSupported {
return html.window.navigator.serviceWorker != null;
}

// 注册 Service Worker
static Future<void> registerServiceWorker() async {
if (isServiceWorkerSupported) {
try {
final registration = await html.window.navigator.serviceWorker!
.register('flutter_service_worker.js');
print('Service Worker registered: ${registration.scope}');
} catch (e) {
print('Service Worker registration failed: $e');
}
}
}

// 检查是否已安装 PWA
static bool get isPwaInstalled {
return html.window.matchMedia('(display-mode: standalone)').matches;
}

// 请求安装 PWA
static void requestPwaInstall() {
// 需要在 beforeinstallprompt 事件中保存事件
// 然后在这里触发
}
}

性能优化

1. 代码分割

// 使用 deferred 关键字延迟加载库
import 'package:my_app/heavy_feature.dart' deferred as heavy_feature;

class LazyLoadedPage extends StatefulWidget {
const LazyLoadedPage({super.key});
@override
State<LazyLoadedPage> createState() => _LazyLoadedPageState();
}

class _LazyLoadedPageState extends State<LazyLoadedPage> {
bool _isLoaded = false;
@override
void initState() {
super.initState();
_loadLibrary();
}
Future<void> _loadLibrary() async {
await heavy_feature.loadLibrary();
setState(() {
_isLoaded = true;
});
}
@override
Widget build(BuildContext context) {
if (!_isLoaded) {
return const Scaffold(
body: Center(child: CircularProgressIndicator()),
);
}
return Scaffold(
body: heavy_feature.HeavyFeatureWidget(),
);
}
}

2. 图片优化

import 'package:flutter/material.dart';

class OptimizedImage extends StatelessWidget {
final String imageUrl;
final double width;
final double height;
const OptimizedImage({
super.key,
required this.imageUrl,
required this.width,
required this.height,
});
@override
Widget build(BuildContext context) {
return Image.network(
imageUrl,
width: width,
height: height,
fit: BoxFit.cover,
// 使用缓存
cacheWidth: width.toInt() * 2,
cacheHeight: height.toInt() * 2,
// 加载占位符
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child;
return Container(
width: width,
height: height,
color: Colors.grey[300],
child: const Center(child: CircularProgressIndicator()),
);
},
// 错误处理
errorBuilder: (context, error, stackTrace) {
return Container(
width: width,
height: height,
color: Colors.grey[300],
child: const Icon(Icons.error),
);
},
);
}
}

3. 减少重绘

import 'package:flutter/material.dart';

class OptimizedWidget extends StatelessWidget {
const OptimizedWidget({super.key});
@override
Widget build(BuildContext context) {
return const RepaintBoundary(
child: ComplexWidget(),
);
}
}

class ComplexWidget extends StatelessWidget {
const ComplexWidget({super.key});
@override
Widget build(BuildContext context) {
return Container(
// 复杂的内容
);
}
}

实践案例：创建一个 Flutter Web 博客

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

void main() {
setUrlStrategy(PathUrlStrategy());
runApp(const BlogApp());
}

class BlogApp extends StatelessWidget {
const BlogApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Web 博客',
theme: ThemeData(
primarySwatch: Colors.blue,
useMaterial3: true,
),
initialRoute: '/',
routes: {
'/': (context) => const HomePage(),
'/post': (context) => const PostPage(),
'/about': (context) => const AboutPage(),
},
);
}
}

// 首页
class HomePage extends StatelessWidget {
const HomePage({super.key});
final List<Map<String, String>> posts = const [
{ 'title': 'Flutter Web 入门指南', 'excerpt': '学习如何使用 Flutter 构建 Web 应用...', 'date': '2024-03-31', },
{ 'title': '响应式布局最佳实践', 'excerpt': '掌握 Flutter 中的响应式设计技巧...', 'date': '2024-03-30', },
{ 'title': '性能优化技巧', 'excerpt': '提升 Flutter Web 应用性能的实用方法...', 'date': '2024-03-29', },
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Web 博客'),
actions: [
TextButton(
onPressed: () => Navigator.pushNamed(context, '/about'),
child: const Text('关于', style: TextStyle(color: Colors.white)),
),
],
),
body: LayoutBuilder(
builder: (context, constraints) {
return SingleChildScrollView(
child: Center(
child: Container(
constraints: const BoxConstraints(maxWidth: 800),
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'最新文章',
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 24),
...posts.map((post) => PostCard(post: post)),
],
),
),
),
);
},
),
);
}
}

// 文章卡片
class PostCard extends StatelessWidget {
final Map<String, String> post;
const PostCard({super.key, required this.post});
@override
Widget build(BuildContext context) {
return Card(
margin: const EdgeInsets.only(bottom: 16),
child: InkWell(
onTap: () => Navigator.pushNamed(context, '/post'),
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
post['title']!,
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
Text(
post['excerpt']!,
style: TextStyle(
fontSize: 16,
color: Colors.grey[600],
),
),
const SizedBox(height: 12),
Text(
post['date']!,
style: TextStyle(
fontSize: 14,
color: Colors.grey[500],
),
),
],
),
),
),
);
}
}

// 文章详情页
class PostPage extends StatelessWidget {
const PostPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('文章详情'),
leading: IconButton(
icon: const Icon(Icons.arrow_back),
onPressed: () => Navigator.pop(context),
),
),
body: SingleChildScrollView(
child: Center(
child: Container(
constraints: const BoxConstraints(maxWidth: 800),
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Flutter Web 入门指南',
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 16),
Text(
'2024-03-31',
style: TextStyle(
fontSize: 14,
color: Colors.grey[500],
),
),
const SizedBox(height: 24),
const Text(
'Flutter Web 是 Flutter 框架的 Web 支持，它允许开发者使用 Flutter 的 UI 框架和 Dart 语言来构建 Web 应用。',
style: TextStyle(
fontSize: 18,
height: 1.6,
),
),
const SizedBox(height: 16),
const Text(
'在本文中，我们将学习如何搭建 Flutter Web 开发环境，创建第一个 Web 应用，以及了解 Web 开发的最佳实践。',
style: TextStyle(
fontSize: 18,
height: 1.6,
),
),
],
),
),
),
),
);
}
}

// 关于页面
class AboutPage extends StatelessWidget {
const AboutPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('关于'),
leading: IconButton(
icon: const Icon(Icons.arrow_back),
onPressed: () => Navigator.pop(context),
),
),
body: const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Flutter Web 博客',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 16),
Text(
'使用 Flutter Web 构建的现代化博客应用',
style: TextStyle(
fontSize: 16,
color: Colors.grey,
),
),
],
),
),
);
}
}

部署

1. 构建 Web 应用

flutter build web --release

2. 部署到 Firebase Hosting

# 安装 Firebase CLI
npm install -g firebase-tools
# 登录 Firebase
firebase login
# 初始化项目
firebase init hosting
# 部署
firebase deploy

3. 部署到 GitHub Pages

# 构建 Web 应用
flutter build web --release
# 复制到 docs 目录
cp -r build/web docs
# 提交并推送
git add docs
git commit -m "Deploy to GitHub Pages"
git push

4. 部署到 Netlify

# 构建 Web 应用
flutter build web --release
# 部署到 Netlify
netlify deploy --prod --dir=build/web

总结

Flutter Web 为开发者提供了一种强大的方式来构建跨平台 Web 应用。通过掌握 Flutter Web 的开发技巧和最佳实践，我们可以创建出既美观又高性能的 Web 应用。