Flutter Web 实战：构建高性能跨平台 Web 应用

manifest.json PWA 配置

定义应用名称、图标及启动行为，使其具备安装能力：

{
  "name": "My Flutter Web App",
  "short_name": "My App",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#667eea",
  "theme_color": "#667eea"
}

关键功能实现

响应式布局

利用 LayoutBuilder 根据视口宽度切换不同布局组件，适配手机、平板和桌面端：

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();
      },
    );
  }
}

路由与 URL 策略

默认情况下 Flutter Web 使用 Hash 路由（如 /#/about）。为了更友好的 URL 结构，需设置路径策略：

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

void main() {
  setUrlStrategy(PathUrlStrategy()); // 移除 URL 中的 #
  runApp(const MyApp());
}

JavaScript 互操作

通过 dart:js 或 dart:html 调用原生 JS API，例如操作本地存储或调用外部函数：

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

class JsInteropExample {
  static void callJsFunction() {
    js.context.callMethod('alert', ['Hello from Flutter!']);
  }

  static void useHtml5Api() {
    final storage = html.window.localStorage;
    storage['key'] = 'value';
  }
}

PWA 支持

注册 Service Worker 以实现离线缓存和后台同步，提升用户体验：

import 'dart:html' as html;

class PwaService {
  static Future<void> registerServiceWorker() async {
    if (html.window.navigator.serviceWorker != null) {
      await html.window.navigator.serviceWorker!.register('flutter_service_worker.js');
    }
  }
}

性能优化策略

代码分割

对于大型应用，使用 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;

  Future<void> _loadLibrary() async {
    await heavy_feature.loadLibrary();
    setState(() => _isLoaded = true);
  }

  @override
  Widget build(BuildContext context) {
    if (!_isLoaded) return const CircularProgressIndicator();
    return heavy_feature.HeavyFeatureWidget();
  }
}

图片与重绘优化

网络图片应指定尺寸并使用缓存，避免过度绘制。复杂区域包裹 RepaintBoundary 可减少不必要的重绘开销：

Image.network(
  imageUrl,
  cacheWidth: width.toInt() * 2,
  cacheHeight: height.toInt() * 2,
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return Container(color: Colors.grey[300]);
  },
);

RepaintBoundary(child: ComplexWidget());

实战案例：博客系统

下面是一个完整的路由与页面结构示例，包含首页列表、文章详情及关于页：

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),
      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'},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Web 博客')),
      body: ListView.builder(
        itemCount: posts.length,
        itemBuilder: (context, index) => Card(
          child: ListTile(
            title: Text(posts[index]['title']!),
            subtitle: Text(posts[index]['excerpt']!),
          ),
        ),
      ),
    );
  }
}

部署方案

构建完成后，可选择多种平台进行托管：

1. Firebase Hosting：适合需要后端集成的场景。

   firebase deploy
   

2. GitHub Pages：静态资源托管首选。

   cp -r build/web docs
   

git add docs git commit -m "Deploy to GitHub Pages" git push 3. **Netlify**：拖拽部署或 CLI 集成，配置简单。 bash netlify deploy --prod --dir=build/web ```

掌握上述技巧后，即可构建出既美观又高性能的 Web 应用。Flutter Web 不仅降低了多端开发门槛，也为前端生态提供了新的可能性。