mantreshkhurana / webf

Build flutter apps with HTML/CSS and JavaScript.

WebF

WebF (Web on Flutter) is a W3C standards-compliant web rendering engine based on Flutter, allowing web applications to run natively on Flutter.

• W3C Standards Compliant: WebF uses HTML/CSS and JavaScript to render content on Flutter, achieving 100% consistency with browser rendering.
• Front-End Framework Supports: As WebF is W3C standards compliant, it can be used with many front-end frameworks, such as React, Vue.
• Expand your Web App with Flutter: WebF is fully customizable. You can define a customized HTML element with Flutter Widgets and use it in your application or add a JavaScript API for any Dart library from <pub.dev> registry.
• Web Development Experience: WebF supports inspecting DOM structure, CSS styles and debugging JavaScript with Chrome DevTools, providing a browser-like web development experience.
• Write Once, Run Anywhere: With the power of WebF, You can write your web application and run it on any device that Flutter supports. Additionally, you can still run your apps in Node.js and web browsers with the same codebase.

Check if a Web API or CSS is available in WebF

Check this yaml

The Relationship between WebF and Kraken

The WebF project is a community support version of Alibaba's Kraken Project. On May 10, 2022, The Kraken Dev Team was dismissed and the project itself are discontinued.

The core developer and architector: andycall, who is from the original Kraken Team. Leave the Alibaba Group and launch this project, to keep following the original ambition of the Kraken project.

For more details(zh_CN): https://www.zhihu.com/question/534811524/answer/2595510449

Join the community (Beta)

Version requirement

WebF	Flutter
>= 0.12.0 < 0.14.0	3.0.5
>= 0.14.0 < 0.15.0	3.3.10 and 3.7.3
>= 0.15.0	3.10.x

How to use

All front-end frameworks based on the WhatWG DOM standard are supported; this time, we are using Vue as an example.

1. Use vue-cli to generate your front-end project

ES6 modules are not supported yet, so Vite is not supported.

vue create app
cd app
npm run serve

And the Vue development server will be hosted at http://<yourip>:8080/.

2. Add webf as a dependency for your flutter apps.

packages.yaml

dependencies:
  webf: <lastest version>

import

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

init

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

3. Add the WebF widget to run your web applications.

@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(), // Enable Chrome DevTools Services
          viewportWidth: viewportSize.width - queryData.padding.horizontal, // Adjust the viewportWidth
          viewportHeight: viewportSize.height - queryData.padding.vertical, // Adjust the viewportHeight
          bundle: WebFBundle.fromUrl('http://<yourip>:8080/'), // The page entry point
        ),
      ],
    ),
  ));
}

4. Run

flutter run

How it works

WebF provides a rendering engine which follows the W3C standards like web browsers do. It can render HTML/CSS and execute JavaScript. It's built on top of the flutter rendering pipelines and implements its own layout and painting algorithms.

With WebF, Web Apps and Flutter Apps share the same rendering context. It means that you can use Flutter Widgets to define your HTML elements and embed your Web App as a Flutter Widget in your flutter apps.

👏 Contributing

By contributing to WebF, you agree that your contributions will be licensed under its Apache-2.0 License.

Read our contributing guide and let's build a better WebF project together.

Thank you to all the people who already contributed to OpenWebF and OpenKraken!

Copyright (c) 2022-present, The OpenWebF authors.