Meet Hummingbird, Flutter’s web platform prototype
The Flutter team made some big announcements yesterday at Flutter Live. One is, of course, the release of Flutter 1.0. But what really caught our eye was the announcement that the team is experimenting with running Flutter on the web. Meet Hummingbird, Flutter’s web platform prototype.
Even in its beta version, Flutter has gathered a lot of attention since it offers some impressive features like hot-reload and its fast visual feedback. But now that Flutter 1.0 is officially here, what’s the next logical step of evolution?
Bringing these impressive features to the web, of course, so you can run the same code in the browser, not only on your phone.
We know you’re all wondering: what about that puzzle!?
It’s Hummingbird, our project for bringing Flutter apps to the web, running the same code in the browser as the phone. This is just a sneak peek but we can’t wait to see what you build with these tools. pic.twitter.com/mQtjcjUGCp
— Flutter (@flutterio) December 4, 2018
Humming on the web
The project is still at the incipient stage and under heavy development but we do have some prototype concepts that we can go through.
When the initial exploration of the idea began, the team was faced with several choices for UI rendering but quickly realized that the specific Flutter layers they want to support dictate the Web technologies that would be used for implementation. Which led to the building of three prototypes:
#1. Just widgets – This prototype implemented Flutter’s widget framework and offered a set of core layout widgets as a foundation for building custom widgets. For layout and positioning, it relied on the Web’s built-in capabilities, such as flexbox, grid layout, browser scrolling via
#2. Widgets + custom layout – This prototype included Flutter’s layout system (provided by
RenderObject), but mapped render objects directly to HTML elements.
#3. Flutter Web Engine – This prototype retained all layers above dart:ui and provided a dart:ui implementation that runs in the browser.
However, after attempting to port several sample applications to the web the team realized that prototypes #1 and #2 would not provide the level of portability that Flutter developers have come to enjoy and, therefore, decided to go with prototype #3, the Flutter Web Engine design, since this would allow the highest framework-level code reuse between platforms. This is how it looks like:
If you are interested in learning more about the design and building process of this new project, check out the official blog post.
The first stable release is here
Let’s have a quick look at what Flutter 1.0 brings along:
New widgets for pixel-perfect iOS apps – Added support for nearly twenty different Firebase services.
Dart platform, 2.1 – An update to Dart 2 that offers smaller code size, faster type checks, and better usability for type errors.
Add to app – Easier to incrementally adopt Flutter by updating our templates, tooling, and guidance for existing apps as well as easier to share assets between Flutter and host code. What’s more the tooling has also being reworked to make it easy to attach to an existing Flutter process without launching the debugger with the application.
Platform views – Introducing platform view widgets (
UiKitView) that let you embed this kind of content on each platform. Like other components, platform view widgets participate in the composition model, which means that you can integrate it with other Flutter content.
Check out the official blog post to find out more about the first Flutter stable release.