Flutter 与 Web 混合开发实践：构建跨平台统一体验

引言

Flutter 作为成熟的跨平台框架，已不仅限于移动端。随着 Flutter Web 的演进，将其与原生 Web 技术结合成为提升开发效率与用户体验的新路径。资深开发者通常认为，优秀的技术方案应当是无缝的，允许在不同终端间自由切换而不必重复造轮子。混合开发正是为了达成这种目标。

什么是 Flutter 与 Web 混合开发？

简单来说，这是在同一个项目中同时运用 Flutter 和 Web 技术（HTML、CSS、JavaScript）。这种方式能结合 Flutter 的渲染能力与 Web 生态的灵活性，创造出更丰富的交互场景。

核心实现方案

1. Flutter Web 编译

这是官方支持的方案，将 Dart 代码编译为 JavaScript 或 WASM 在浏览器运行。

优势：完全复用 Flutter 代码，UI 一致性高，性能持续优化中。注意：生成的资源包体积较大，部分插件在 Web 端可能不可用，且与现有 Web 项目集成需处理路由冲突。

环境准备：

flutter channel beta
flutter upgrade
flutter config --enable-web
flutter create my_app
cd my_app
flutter run -d chrome
flutter build web

2. WebView 嵌入

在 Flutter 应用中加载外部网页内容，适合需要频繁更新或依赖复杂 JS 逻辑的场景。

优势：直接复用现有 Web 资产，开发成本低，动态性强。注意：性能受限于 WebView 容器，不同系统下的行为差异需适配，JS 与 Dart 通信需配置桥接。

基础示例：

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

class WebViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('WebView 示例')),
      body: WebView(
        initialUrl: 'https://www.example.com',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController controller) {},
      ),
    );
  }
}

3. 混合架构设计

核心业务用 Flutter，特定功能模块（如活动页、营销页）用 Web 承载。

优势：兼顾性能与灵活性，发挥各自技术栈长处。注意：维护两套技术栈会增加复杂度，需确保 UI 风格的一致性。

结构示意：

// Flutter 主界面
Scaffold(
  body: Column(
    children: [
      // Flutter 核心组件
      Container(height: 200, child: Center(child: Text('Flutter 部分'))),
      // Web 扩展区域
      Expanded(child: WebView(initialUrl: '...')),
    ],
  ),
)

实战案例解析

案例一：纯 Flutter Web 应用

适用于希望保持单一代码库的项目。重点在于初始化配置与主题适配。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Web 示例',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Web 示例')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('点击次数:', style: TextStyle(fontSize: 18)),
            Text('$_counter', style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

Flutter 与 Web 混合开发实践：构建跨平台统一体验