Flutter Web：混合开发的最佳实践
一次编写，多端运行。Flutter Web 让前端开发更加高效。
一、Flutter Web 的优势
作为一名追求像素级还原的 UI 匠人，我对跨平台解决方案有着严格的要求。Flutter Web 不仅让我们能够使用相同的代码库构建 Android、iOS 和 Web 应用，还提供了出色的性能和一致的用户体验。它就像是一把瑞士军刀，为前端开发带来了前所未有的便利。
二、环境搭建
1. 启用 Web 支持
# 启用 Web 支持
flutter config –enable-web
# 检查可用设备
flutter devices
# 创建项目
flutter create my_web_app
cd my_web_app
# 运行 Web 应用
flutter run -d chrome
2. 项目结构
my_web_app/
lib/
main.dart # 主入口
home_screen.dart # 主屏幕
components/ # 组件
services/ # 服务
web/ # Web 特定文件
index.html # HTML 入口
manifest.json # PWA 配置
icons/ # 图标
pubspec.yaml # 依赖配置
三、基础实现
1. 简单的 Web 应用
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: 'Flutter Web Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: const HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Web Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
四、Web 特定功能
1. 响应式布局
class ResponsiveLayout extends StatelessWidget {
final Widget mobileLayout;
final Widget tabletLayout;
final Widget desktopLayout;
const ResponsiveLayout({
Key? key,
required this.mobileLayout,
required this.tabletLayout,
required this.desktopLayout,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return mobileLayout;
} else if (constraints.maxWidth < 1024) {
return tabletLayout;
} else {
return desktopLayout;
}
},
);
}
}
// 使用
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ResponsiveLayout(
mobileLayout: MobileHome(),
tabletLayout: TabletHome(),
desktopLayout: DesktopHome(),
);
}
}
2. 平台检测
import 'package:flutter/foundation.dart';
class PlatformAwareWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
if (kIsWeb) {
// Web 特定实现
return WebSpecificWidget();
} else if (Platform.isAndroid) {
// Android 特定实现
return AndroidSpecificWidget();
} else if (Platform.isIOS) {
// iOS 特定实现
return IOSSpecificWidget();
} else {
// 通用实现
return CommonWidget();
}
}
}
3. 与 Web API 交互
import 'dart:js' as js;
class WebInteropWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
ElevatedButton(
onPressed: () {
// 调用 JavaScript 函数
js.context.callMethod('alert', ['Hello from Flutter!']);
},
child: Text('Show Alert'),
),
ElevatedButton(
onPressed: () {
// 访问 DOM
js.context['document'].callMethod('title', ['Flutter Web App']);
},
child: Text('Change Title'),
),
],
);
}
}
五、性能优化
1. 代码分割
// main.dart
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
routes: {
'/': (context) => HomePage(),
'/details': (context) => DetailsPage(),
},
);
}
}
// details_page.dart
class DetailsPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Details')),
body: Center(child: Text('Details Page')),
);
}
}
2. 图片优化
class OptimizedImage extends StatelessWidget {
final String src;
final double? width;
final double? height;
const OptimizedImage({
Key? key,
required this.src,
this.width,
this.height,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Image.network(
src,
width: width,
height: height,
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
: null,
),
);
},
errorBuilder: (context, error, stackTrace) {
return Container(
width: width,
height: height,
color: Colors.grey[200],
child: Icon(Icons.error),
);
},
);
}
}
六、PWA 支持
1. 配置 manifest.json
{
"name": "Flutter Web App",
"short_name": "FlutterApp",
"description": "A Flutter Web application",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#4285f4",
"icons": [
{
"src": "icons/Icon-192.png",
"sizes": "192×192",
"type": "image/png"
},
{
"src": "icons/Icon-512.png",
"sizes": "512×512",
"type": "image/png"
}
]
}
2. 配置 service_worker.js
// service_worker.js
const CACHE_NAME = 'flutter-app-cache';
const ASSETS = [
'/',
'/index.html',
'/manifest.json',
'/icons/Icon-192.png',
'/icons/Icon-512.png',
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
return cache.addAll(ASSETS);
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});
七、部署
1. 构建 Web 应用
# 开发模式
flutter build web
# 生产模式（优化）
flutter build web –release –web-renderer canvaskit
# 生产模式（体积更小）
flutter build web –release –web-renderer html
2. 部署到静态网站托管
- Firebase Hosting
- Netlify
- Vercel
- GitHub Pages
Flutter Web 让跨平台开发变得简单优雅，就像好的设计一样自然。
#flutter #web #hybrid #cross-platform #frontend
