Flutter网页视图插件webf的功能使用

Flutter网页视图插件webf的功能使用

介绍

WebF 是一个高性能的网页渲染引擎，基于 Flutter 构建，允许开发者使用 HTML/CSS 和 JavaScript 来构建 Flutter 应用程序。它为 Web 开发者提供了一个熟悉的开发环境，并且可以无缝集成到 Flutter 生态系统中。WebF 遵循 W3C 标准，支持主流前端框架（如 React 和 Vue），并且可以在任何 Flutter 兼容的设备上运行。

主要特性

• 遵循 W3C 标准：通过使用 HTML/CSS 和 JavaScript，WebF 在 Flutter 中渲染内容，确保与标准浏览器渲染的一致性。
• 兼容主流前端框架：由于符合 W3C 标准，WebF 可以轻松集成 React、Vue 等流行前端框架。
• 增强 Web 应用：WebF 提供了强大的自定义能力，允许开发者使用 Flutter Widgets 定制 HTML 元素，或者通过 Dart 库中的 JavaScript API 增强应用。
• 传统 Web 开发体验：WebF 支持 DOM 结构检查、CSS 样式评估和 JavaScript 调试，开发者可以通过 Chrome DevTools 进行调试。
• 一次编写，处处运行：使用 WebF 设计的应用程序可以部署到任何 Flutter 兼容的设备上，并且可以在 Node.js 或浏览器中运行，所有这些都来自同一个代码库。

使用步骤

1. 使用 Vue CLI 生成前端项目

首先，我们需要创建一个基于 Vue 的前端项目。请注意，WebF 目前不支持 ES6 模块，因此 Vite 不被支持。

vue create app
cd app
npm run serve

此时，Vue 开发服务器将托管在 http://<yourip>:8080/。

2. 添加 webf 作为 Flutter 项目的依赖

在 pubspec.yaml 文件中添加 webf 依赖：

dependencies:
  webf: ^latest_version

然后，在 Dart 文件中导入必要的包：

import 'package:webf/webf.dart';
import 'package:webf/devtools.dart';

3. 在 Flutter 应用中添加 WebF Widget

接下来，我们将 WebF Widget 添加到 Flutter 应用中，以便运行我们的 Web 应用程序。

[@override](/user/override)
Widget build(BuildContext context) {
  final MediaQueryData queryData = MediaQuery.of(context);
  final Size viewportSize = queryData.size;

  return Scaffold(
    body: Center(
      child: Column(
        children: [
          WebF(
            devToolsService: ChromeDevToolsService(), // 启用 Chrome DevTools 服务
            viewportWidth: viewportSize.width - queryData.padding.horizontal, // 调整视口宽度
            viewportHeight: viewportSize.height - queryData.padding.vertical, // 调整视口高度
            bundle: WebFBundle.fromUrl('http://<yourip>:8080/'), // 页面入口点
          ),
        ],
      ),
    ),
  );
}

4. 运行应用

最后，使用以下命令运行 Flutter 应用：

flutter run

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中集成 WebF 并加载一个本地的 Web 应用程序。

/*
 * Copyright (C) 2019-2022 The Kraken authors. All rights reserved.
 * Copyright (C) 2022-present The WebF authors. All rights reserved.
 */

import 'package:flutter/material.dart';
import 'package:webf/webf.dart';
import 'package:webf/devtools.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Kraken Browser',
      debugShowCheckedModeBanner: false,
      home: FirstPage(title: 'Landing Bay'),
    );
  }
}

class FirstPage extends StatefulWidget {
  const FirstPage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  State<StatefulWidget> createState() {
    return FirstPageState();
  }
}

class FirstPageState extends State<FirstPage> {
  late WebFController controller;

  [@override](/user/override)
  void didChangeDependencies() {
    super.didChangeDependencies();
    controller = WebFController(
      context,
      devToolsService: ChromeDevToolsService(),
    );
    controller.preload(WebFBundle.fromUrl('assets:assets/bundle.html'));
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    controller.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) {
              return WebFDemo(controller: controller);
            }));
          },
          child: const Text('Open WebF Page'),
        ),
      ),
    );
  }
}

class WebFDemo extends StatelessWidget {
  final WebFController controller;

  WebFDemo({required this.controller});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebF Demo'),
      ),
      body: Center(
        child: WebF(controller: controller),
      ),
    );
  }
}