Flutter 与 Web 混合开发实践

3. 混合应用架构

使用 Flutter 开发核心功能，使用 Web 技术开发特定功能。

优点：

• 充分发挥 Flutter 和 Web 的优势
• 灵活性高
• 可以根据需要选择最适合的技术

缺点：

• 开发复杂度增加
• 需要管理两种技术栈
• 可能出现一致性问题

基本实现：

// Flutter 部分
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class HybridApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '混合应用示例',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('混合应用'),
        backgroundColor: Color(0xFF667eea),
      ),
      body: Column(
        children: [
          // Flutter 部分
          Container(
            height: 200,
            child: Center(
              child: Text(
                'Flutter 部分',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
            ),
          ),
          // Web 部分
          Expanded(
            child: WebView(
              initialUrl: 'https://www.example.com',
              javascriptMode: JavascriptMode.unrestricted,
            ),
          ),
        ],
      ),
    );
  }
}

实际应用案例

案例 1：Flutter Web 应用

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Web 示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      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 示例'),
        backgroundColor: Color(0xFF667eea),
      ),
      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,
        tooltip: '增加',
        child: Icon(Icons.add),
        backgroundColor: Color(0xFF667eea),
      ),
    );
  }
}

案例 2：Flutter 嵌入 WebView

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

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView 示例'),
        backgroundColor: Color(0xFF667eea),
        actions: [
          IconButton(
            icon: Icon(Icons.refresh),
            onPressed: () {
              _controller.reload();
            },
          ),
          IconButton(
            icon: Icon(Icons.arrow_back),
            onPressed: () async {
              if (await _controller.canGoBack()) {
                _controller.goBack();
              }
            },
          ),
          IconButton(
            icon: Icon(Icons.arrow_forward),
            onPressed: () async {
              if (await _controller.canGoForward()) {
                _controller.goForward();
              }
            },
          ),
        ],
      ),
      body: WebView(
        initialUrl: 'https://www.example.com',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController controller) {
          _controller = controller;
        },
        onPageFinished: (String url) {
          print('页面加载完成：$url');
        },
        navigationDelegate: (NavigationRequest request) {
          print('导航到：${request.url}');
          return NavigationDecision.navigate;
        },
      ),
    );
  }
}

案例 3：Flutter 与 Web 交互

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

class WebViewInteractionExample extends StatefulWidget {
  @override
  _WebViewInteractionExampleState createState() => _WebViewInteractionExampleState();
}

class _WebViewInteractionExampleState extends State<WebViewInteractionExample> {
  late WebViewController _controller;
  String _message = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 与 Web 交互'),
        backgroundColor: Color(0xFF667eea),
      ),
      body: Column(
        children: [
          Container(
            padding: EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('Flutter 部分', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                SizedBox(height: 8),
                Text('从 Web 接收的消息：$_message'),
                SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () {
                    _controller.evaluateJavascript('sendMessageToWeb("Hello from Flutter!")');
                  },
                  child: Text('发送消息到 Web'),
                  style: ElevatedButton.styleFrom(
                    primary: Color(0xFF667eea),
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: WebView(
              initialUrl: 'data:text/html;base64,${Uri.encodeComponent('''<!DOCTYPE html>
<html>
<head>
<title>Web 部分</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
h1 { color: #667eea; }
#message { margin: 20px 0; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
button { background: #667eea; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; }
button:hover { background: #5a6fd8; }
</style>
</head>
<body>
<h1>Web 部分</h1>
<div>等待消息...</div>
<button onclick="sendMessageToFlutter()">发送消息到 Flutter</button>
<script>
function sendMessageToWeb(message) {
  document.getElementById('message').textContent = '从 Flutter 接收：' + message;
}
function sendMessageToFlutter() {
  if (window.flutter_inappwebview) {
    window.flutter_inappwebview.callHandler('message', 'Hello from Web!');
  }
}
</script>
</body>
</html>''')}',
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (WebViewController controller) {
                _controller = controller;
              },
              javascriptChannels: Set.from([
                JavascriptChannel(
                  name: 'Flutter',
                  onMessageReceived: (JavascriptMessage message) {
                    setState(() {
                      _message = message.message;
                    });
                  },
                ),
              ]),
            ),
          ),
        ],
      ),
    );
  }
}

性能优化技巧

1. 代码分割：对于 Flutter Web 应用，使用代码分割减少初始加载时间
2. 资源优化：优化图片、字体等资源，减少加载时间
3. 懒加载：对于非关键内容，使用懒加载技术
4. 缓存策略：合理使用缓存，减少重复请求
5. WebView 优化：对于 WebView 集成，优化 Web 内容的性能
6. 平台特定优化：根据不同平台的特点，进行针对性优化

最佳实践

1. 合理选择技术栈：根据功能需求和性能要求，选择最适合的技术
2. 保持一致性：确保在不同平台上的用户体验一致
3. 模块化设计：将代码模块化，提高可维护性
4. 测试：在不同平台上进行充分测试，确保功能正常
5. 性能监控：监控应用性能，及时发现和解决问题
6. 持续优化：不断优化应用性能和用户体验

工具推荐

1. Flutter DevTools：用于调试和分析 Flutter 应用
2. Chrome DevTools：用于调试和分析 Web 应用
3. Firebase Performance Monitoring：用于监控应用性能
4. Lighthouse：用于分析 Web 应用的性能和质量
5. WebView Debugging：用于调试 WebView 内容

总结

Flutter 与 Web 混合开发是一种强大的开发方式，它结合了 Flutter 的跨平台能力和 Web 的灵活性，为开发者提供了更多的选择。在实现 Flutter 与 Web 混合开发时，我们要精心设计每一个细节，确保应用在不同平台上都能提供出色的用户体验。记住，像素不能偏差 1px，用户体验的一致性也不能偏差一分一毫。CSS 是流动的韵律，JS 是叙事的节奏，而 Flutter 则是跨平台的桥梁。让我们用 Flutter 与 Web 混合开发，打造出更加出色的跨平台应用。