Andy Dong Profile
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
Don't wanna be here? Send us removal request.
@andy_webf
Andy Dong
17 days
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.
Tweet card summary image
github.com
Bring JavaScript and Web Dev to Flutter. Contribute to openwebf/webf development by creating an account on GitHub.
2
1
2
@andy_webf
Andy Dong
1 day
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
Tweet card summary image
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
@andy_webf
Andy Dong
1 day
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
Tweet card summary image
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
@andy_webf
Andy Dong
17 days
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
@andy_webf
Andy Dong
17 days
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
@andy_webf
Andy Dong
1 month
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
@andy_webf
Andy Dong
2 months
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
@andy_webf
Andy Dong
2 months
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
@andy_webf
Andy Dong
3 months
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
@andy_webf
Andy Dong
3 months
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
@andy_webf
Andy Dong
3 months
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
@andy_webf
Andy Dong
3 months
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
@andy_webf
Andy Dong
3 months
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
@andy_webf
Andy Dong
3 months
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
@andy_webf
Andy Dong
3 months
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
@andy_webf
Andy Dong
3 months
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
@andy_webf
Andy Dong
3 months
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
@andy_webf
Andy Dong
3 months
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
@andy_webf
Andy Dong
3 months
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