Flutter Web 混合开发最佳实践

import 'package:flutter/foundation.dart';

class PlatformAwareWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    if (kIsWeb) {
      // Web 特定实现
      return WebSpecificWidget();
    } else if (Platform.isAndroid) {
      return AndroidSpecificWidget();
    } else if (Platform.isIOS) {
      return IOSSpecificWidget();
    } else {
      return CommonWidget();
    }
  }
}

若需调用 JavaScript 函数或操作 DOM，可通过 dart:js 包进行互操作：

import 'dart:js' as js;

class WebInteropWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          onPressed: () {
            js.context.callMethod('alert', ['Hello from Flutter!']);
          },
          child: const Text('Show Alert'),
        ),
        ElevatedButton(
          onPressed: () {
            js.context['document'].callMethod('title', ['Flutter Web App']);
          },
          child: const Text('Change Title'),
        ),
      ],
    );
  }
}

性能优化策略

代码分割

通过定义路由可以实现按需加载，减少初始包体积：

// main.dart
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        '/': (context) => HomePage(),
        '/details': (context) => DetailsPage(),
      },
    );
  }
}

图片优化

网络图片加载时应处理进度和错误状态，避免白屏或崩溃：

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: const Icon(Icons.error),
        );
      },
    );
  }
}

PWA 支持与部署

配置 Manifest

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

{
  "name": "Flutter Web App",
  "short_name": "FlutterApp",
  "description": "A Flutter Web application",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4285f4"
}

Service Worker

Service Worker 负责缓存资源，提升离线访问速度：

const CACHE_NAME = 'flutter-app-cache';
const ASSETS = [
  '/',
  '/index.html',
  '/manifest.json',
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS))
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => response || fetch(event.request))
  );
});

构建与部署

生产环境构建推荐使用 canvaskit 渲染器以获得更好的兼容性：

flutter build web --release --web-renderer canvaskit

生成的 build/web 目录可直接部署到静态托管服务，如 Firebase Hosting、Netlify、Vercel 或 GitHub Pages。