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.devregistry. -
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.
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.
All front-end frameworks based on the WhatWG DOM standard are supported; this time, we are using Vue as an example.
ES6 modules are not supported yet, so Vite is not supported.
vue create app
cd app
npm run serveAnd the Vue development server will be hosted at http://<yourip>:8080/.
packages.yaml
dependencies:
webf: <lastest version>import
import 'package:webf/webf.dart';
import 'package:webf/devtools.dart';init
void main() {
runApp(MyApp());
}@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
),
],
),
));
}flutter runWebF 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.
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.