days
-6
-7
hours
-1
-1
minutes
-4
-4
seconds
0
-5
search
Plus Flutter 1.0 is out!

Meet Hummingbird, Flutter’s web platform prototype

Eirini-Eleni Papadopoulou
Flutter
© Shutterstock /Ondrej Prosicky  

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.

Yesterday at Flutter Live, the team announced both the release of Flutter 1.0 as well as their new project, Hummingbird, a prototype of building Flutter for the web.

Humming on the web

Hummingbird is the embodiment of the team’s experiments to bring Flutter to the web. It is a “web-based implementation of the Flutter runtime that takes advantage of the capability of the Dart platform to compile not just to native ARM code but also to JavaScript. This enables Flutter code to run on the standards-based web without change.”

The project is still at the incipient stage and under heavy development but we do have some prototype concepts that we can go through.

SEE ALSO: ThoughtWorks Technology Radar: Istio, Knative, WebAssembly & Flutter are worth exploring

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 overflow:scroll, etc.

#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

Since its initial release, Flutter has become massively successful even in its beta form. And now that the first stable release is finally here, its future looks nothing but bright.

SEE ALSO: Kiwi is a *healthy* dependency injection library for Dart and Flutter

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 (AndroidView and 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.

Author
Eirini-Eleni Papadopoulou
Eirini-Eleni Papadopoulou is an assistant editor for JAXenter.com. Just finished her masters in Modern East Asian Studies and plans to continue with her old hobby that is computer science.