Andy Dong
@andy_webf
Followers
129
Following
6
Media
18
Statuses
53
Building @openwebf: The way to build fast, native flutter apps with JavaScript and CSS
Joined December 2014
Dev is back on GitHub: https://t.co/P6ax81OcS4. We’ve switched to GPL-3.0 for the free plan, and all source code is available on GitHub. For commercial use, see https://t.co/VB5wHpU7FP—pricing starts at $10/month.
github.com
Bring JavaScript and Web Dev to Flutter. Contribute to openwebf/webf development by creating an account on GitHub.
2
1
2
CSS Grid Layout just landed in WebF 0.24.0 🚀 Now you can build sophisticated Flutter UIs using the same grid system you already know from modern web frameworks—yes, Tailwind-style classes like grid grid-cols-3 gap-4 work too. What’s new 👇 https://t.co/yy9i7nAe3r
github.com
Set the minimal flutter version requirement to 3.29.x Major Features Blink CSS Engine Integration (#773, #779) New experimental C++-based CSS engine as the future replacement for the Dart-based ...
0
1
1
Finally bringing Chrome Blink’s CSS engine into WebF—our biggest effort since mid-2023. This unlocks higher performance, stronger standards compliance, and the solid foundation we need for full Tailwind CSS v3-v4 support. https://t.co/yy9i7nAe3r
github.com
Set the minimal flutter version requirement to 3.29.x Major Features Blink CSS Engine Integration (#773, #779) New experimental C++-based CSS engine as the future replacement for the Dart-based ...
0
1
1
We chose GPL-3.0 because we want companies to work with us commercially, so we can keep investing in the project and help everyone succeed. We’ve also made several changes to our commercial license to address the “screwed overnight” risks people worry about with GPL-3.0: Price
0
1
0
Some people dislike GPL-3.0, but building a bridge between Flutter and the web takes real time and effort. We need sustainable income to keep WebF moving. If you have better ideas to support the project long-term, please let us know.
0
0
0
Added a complete set of Cupertino-style UI components to WebF Go, backed by Flutter’s Cupertino libraries. This is a great showcase of how easy it is to wrap any Flutter UI library for web developers. Desktop builds are now included as well. Have a try: https://t.co/auUnHgtVzY
1
0
1
The WebF Go app is now live on the App Store and Google Play. Download it and experience native-level performance beyond the browser. You can start a frontend project with npm create vite@latest, or just browse our real-world use cases. App Store: https://t.co/daV9mfqRMC Google
1
1
0
Finally, most modern web frameworks now work in WebF and Flutter—including React, Vue, Solid, and Svelte. npm create vite@latest Run Vite’s dev server inside WebF.
1
1
0
WebF supports standard W3C DOM events, including both the capture and bubbling phases. An event is captured from the root down to the target, then (if the type is bubbleable) it bubbles from the target back up to the root. In Flutter-backed web components, you can dispatch
0
0
2
WebF lets you style and update Flutter-backed web components with CSS, including via CSS variables. In the previous post, we covered how JavaScript developers can size components using CSS. For use cases like global theming, updating global CSS variables is more efficient
0
1
3
In WebF, Flutter-widget–based web components can be sized and positioned directly with CSS and JS, and they’re compatible with modern CSS tooling. This means you can build your app using either Flutter-backed web components or standard HTML elements (like <div>), with the same
0
0
1
In WebF, DOM elements and your web components’ Flutter widgets share a single widget/render tree. They nest and lay out together under Flutter’s constraint-based layout and sizing system. Even if the app is authored in HTML/CSS and the Web Components are backed by Flutter
0
0
0
To register a Web Component in WebF with Dart, create a class that extends the YourComponentBindings generated by the WebF CLI. Like a StatefulWidget, override createState() and implement build() to define the widget tree. Implement the generated property and method stubs to
1
2
20
WebF CLI includes a code generator that outputs both Dart bindings and a ready-to-publish npm package. It’s built for Flutter developers: each run produces a complete npm package from your typings, and it automatically uses your Flutter package version. You don’t need to touch
0
1
7
The interface typings file is a subset of TypeScript’s type syntax. Follow the pattern below to declare your interfaces: // Properties for your web component <YourComponentName>Properties { // ... } // Methods on your web component’s DOM instance <YourComponentName>Methods {
0
0
1
It’s easy to wrap your Flutter widget library as Web Components for JavaScript developers. We’ve done a lot of work to make this process simple: 1. No JavaScript/TypeScript code involved 2. No glue/binding code to implement 3. Work entirely in Dart There are just three steps:
8
5
43
Adding web developers to Flutter teams is the first design objective of WebF. To achieve this, we need to clearly define the boundaries between tasks handled by web developers and those handled by Flutter developers. The key to this approach is Web Components: 1. Flutter
0
0
2
Some people might wonder how HTML/CSS works in Flutter. Is it just a combination of Flutter widgets like SizedBox or Stack? The answer is no. These widgets are too limited to build a layout engine that fully supports the CSS specification. For example: 1. The auto minimum
0
0
1
WebF brings web development to Flutter. Unlike React Native, we don’t require developers to use special elements like <view> or <text> for basic UI markup. Instead, you can simply use HTML, CSS, and DOM APIs — the same foundations that most developers (and even AI tools) are
1
1
4