OpenWebF

Build flutter apps with HTML/CSS and JavaScript.
Building Flutter apps that are friendly to web developers

Getting Started | Guides For Web Developers | Guides For Flutter/Mobile Developers

WebF presents a high-performance, cutting-edge web rendering engine built on top of Flutter, empowering web applications to operate natively within the Flutter ecosystem.

• Adherence to W3C Standards: By leveraging HTML/CSS and JavaScript, WebF renders content on Flutter, ensuring impeccable alignment with standard browser rendering.

• Compatible with Leading Front-End Frameworks: Given its compliance with W3C standards, WebF seamlessly integrates with popular front-end frameworks, including React and Vue.

• Amplify Your Web Applications with Flutter: WebF's adaptability shines through its customization capabilities. Craft bespoke HTML elements using Flutter Widgets or enhance your application by integrating a JavaScript API sourced from any Dart library on the pub.dev registry.

• Authentic Web Development Environment: Experience a traditional web development setting with WebF. It facilitates DOM structure inspection, CSS style evaluations, and JavaScript debugging via Chrome DevTools.

• Craft Once, Deploy Everywhere: Harness the versatility of WebF to design your web application and launch it across any Flutter-compatible device. What's more, maintain the flexibility to execute your apps within Node.js or web browsers, all from a unified codebase.

Join Our Mission

We envision providing web developers with an innovative web rendering engine, surpassing WebView in performance and adaptability across both mobile and desktop platforms.

WebF's journey is ambitious and enduring. We believe in the strength of collective effort. If you share our dream of a superior alternative to WebView for the future, your expertise could be invaluable to us.

Further, financial contributions can pave the way for erstwhile members of the Kraken team to rejoin our mission, bolstering our developmental pace and potential.

If you or your team are interested in supporting us, please contact @andycall on our Discord channel.

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.

Contributors

👏 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.