Flutter 与 Web 混合开发技术实践

2. 微前端架构

使用微前端架构，将 Flutter Web 应用作为独立的微前端应用集成到主应用中。

步骤 1：创建微前端配置

// micro-frontends.config.js
module.exports = {
  apps: [
    {
      name: 'flutter-app',
      entry: 'http://localhost:3001', // Flutter Web 应用的地址
      container: '#flutter-container',
      activeWhen: '/flutter'
    }
  ]
};

步骤 2：集成到主应用

<!-- 主应用 index.html -->
<div id="flutter-container"></div>
<script src="micro-frontends.js"></script>

3. 跨平台状态管理

使用状态管理库（如 Redux、MobX 或 Riverpod）在 Flutter 和 Web 之间共享状态。

步骤 1：创建共享状态

// Flutter 中的状态管理
import 'package:flutter_riverpod/flutter_riverpod.dart';

final counterProvider = StateProvider((ref) => 0);

class CounterWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = ref.watch(counterProvider);
    return Text('Counter: $counter');
  }
}

步骤 2：在 Web 中访问状态

// Web 中的状态管理
import { createStore } from 'redux';

const initialState = { counter: 0 };
function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT': return { counter: state.counter + 1 };
    case 'DECREMENT': return { counter: state.counter - 1 };
    default: return state;
  }
}
const store = createStore(counterReducer);

// 订阅状态变化
store.subscribe(() => {
  document.getElementById('counter').textContent = store.getState().counter;
});

实际案例：Flutter 与 React 混合开发

1. 项目结构

project/
├── flutter_app/ # Flutter Web 应用
├── react_app/ # React 应用
└── shared/ # 共享代码

2. Flutter 端实现

// flutter_app/lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  final _channel = MethodChannel('flutter_web_channel');

  @override
  void initState() {
    super.initState();
    _channel.setMethodCallHandler((call) async {
      if (call.method == 'incrementCounter') {
        setState(() {
          _counter++;
        });
      }
    });
  }

  void _sendMessageToWeb() {
    _channel.invokeMethod('messageFromFlutter', {'message': 'Hello from Flutter!'});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Web App')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:',),
            Text('$_counter', style: Theme.of(context).textTheme.headline4,),
            ElevatedButton(
              onPressed: _sendMessageToWeb,
              child: Text('Send Message to Web'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _counter++;
          });
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

3. React 端实现

// react_app/src/App.js
import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [counter, setCounter] = useState(0);
  const [message, setMessage] = useState('');

  useEffect(() => {
    if (window.flutterInApp) {
      setupFlutterCommunication();
    } else {
      window.addEventListener('flutterInAppReady', setupFlutterCommunication);
    }
    return () => {
      window.removeEventListener('flutterInAppReady', setupFlutterCommunication);
    };
  }, []);

  const setupFlutterCommunication = () => {
    window.flutterInApp.postMessage({ method: 'incrementCounter' });
    window.flutterInApp.addEventListener('message', (event) => {
      const data = JSON.parse(event.data);
      if (data.message) {
        setMessage(data.message);
      }
    });
  };

  const sendMessageToFlutter = () => {
    if (window.flutterInApp) {
      window.flutterInApp.postMessage({ method: 'incrementCounter' });
      setCounter(counter + 1);
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>React App</h1>
        <p>Counter: {counter}</p>
        <p>Message from Flutter: {message}</p>
        <button onClick={sendMessageToFlutter}>Increment Counter in Flutter</button>
      </header>
      <div id="flutter-container"></div>
    </div>
  );
}
export default App;

4. 集成配置

<!-- react_app/public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>React App</title>
</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="flutter-container"></div>
  <script>
    window.flutterInApp = {
      postMessage: function(message) {
        if (window._flutter && window._flutter.loader) {
          window._flutter.loader.loadEntrypoint({
            serviceWorker: { serviceWorkerVersion: null },
            entrypointUrl: 'flutter_app/main.dart.js',
            onEntrypointLoaded: async function(engineInitializer) {
              const appRunner = await engineInitializer.initializeEngine({
                hostElement: document.querySelector('#flutter-container'),
              });
              await appRunner.runApp();
              window.flutterChannel.invokeMethod('incrementCounter');
            }
          });
        }
      },
      addEventListener: function(event, callback) {
        window.addEventListener('flutterMessage', callback);
      }
    };
    window.dispatchEvent(new Event('flutterInAppReady'));
  </script>
  <script src="flutter_app/flutter.js" defer></script>
</body>
</html>

性能优化：Flutter Web 的性能考虑

1. 选择合适的渲染器

Flutter Web 提供了两种渲染器：

• CanvasKit：使用 WebAssembly 渲染，性能更好，但初始加载较大
• HTML：使用 DOM 渲染，初始加载较小，但性能稍差

# 使用 CanvasKit 渲染器
flutter build web --web-renderer canvaskit
# 使用 HTML 渲染器
flutter build web --web-renderer html

2. 代码分割

使用代码分割减少初始加载时间：

// 使用 deferred loading
import 'package:flutter/foundation.dart' show kIsWeb;

Future<void> loadHeavyModule() async {
  if (kIsWeb) {
    await import('package:my_app/heavy_module.dart');
  }
}

3. 资源优化

• 压缩图片和资源
• 使用适当的图片格式（WebP 或 SVG）
• 延迟加载非关键资源

4. 网络优化

• 使用 CDN 分发静态资源
• 启用 HTTP/2 或 HTTP/3
• 实现缓存策略

常见问题和解决方案

1. 跨域问题

问题：Flutter Web 应用与主应用之间的跨域请求被阻止。

解决方案：在主应用的服务器上配置 CORS 头：

// Express 服务器配置
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

2. 性能问题

问题：Flutter Web 应用在某些设备上运行缓慢。

解决方案：

• 使用 HTML 渲染器
• 减少 Widget 树的复杂度
• 使用 const 构造函数
• 避免频繁的重建

3. 通信问题

问题：Flutter 与 Web 之间的通信失败。

解决方案：

• 使用统一的通信协议
• 处理异步通信
• 添加错误处理

4. 响应式设计

问题：Flutter Web 应用在不同屏幕尺寸上显示不正确。

解决方案：

• 使用 MediaQuery 适配不同屏幕尺寸
• 使用 LayoutBuilder 构建响应式布局
• 为 Web 平台添加特定的布局逻辑

最佳实践

1. 代码组织

• 将平台特定的代码分离到不同的文件中
• 使用抽象层处理平台差异
• 保持共享代码的平台无关性

2. 状态管理

• 使用跨平台的状态管理库
• 实现状态的同步机制
• 考虑使用本地存储或云存储持久化状态

3. 测试

• 在不同平台上测试应用
• 测试响应式布局
• 测试性能和加载时间

4. 部署

• 使用 CI/CD 自动化部署
• 为不同平台配置不同的部署策略
• 监控应用性能和用户体验