Tag Archives: Dart

Flutter: a Portable UI Framework for Mobile, Web, Embedded, and Desktop

Posted by the Flutter Team

Today marks an important milestone for the Flutter framework, as we expand our focus from mobile to incorporate a broader set of devices and form factors. At I/O, we’re releasing our first technical preview of Flutter for web, announcing that Flutter is powering Google’s smart display platform including the Google Home Hub, and delivering our first steps towards supporting desktop-class apps with Chrome OS.

From Mobile to Multi-Platform

For a long time, the Flutter team mission has been to build the best framework for developing mobile apps for iOS and Android. We believe that mobile development is ripe for improvement, with developers today forced to choose between building the same app twice for two platforms, or making compromises to use cross-platform frameworks. Flutter hits the sweet spot of enabling a single codebase to deliver beautiful, fast, tailored experiences with high developer productivity for both platforms, and we’ve been excited to see how our early efforts have flourished into one of the most popular open source projects.

As we started to home in on our 1.0 release last year, we began experimenting with broadening the scope of Flutter to other platforms. This was triggered both by internal teams within Google who are increasingly relying on Flutter, as well as the latent potential of the Dart platform for delivering portable experiences. In particular, a small team who were already building a web framework for Dart for internal usage started an exploratory project (codename “Hummingbird”) to evaluate the technical merits of porting the Flutter engine to support the standards-based web.

The results of this project were startling, thanks in large part to the rapid progress in web browsers like Chrome, Firefox, and Safari, which have pervasively delivered hardware-accelerated graphics, animation, and text as well as fast JavaScript execution. Within a few months of beginning the project, we had the core Flutter framework primitives working, and soon after we had demos running on mobile and desktop browsers. Along with Dart’s long pedigree of compiling for the web, this proved that we could also bring the Flutter framework and apps to run on the web.

In parallel, the core Flutter project has been making progress to enable desktop-class apps, with input paradigms such as keyboard and mouse, window resizing, and tooling for Chrome OS app development. The exploratory work that we did for embedding Flutter into desktop-class apps running on Windows, Mac and Linux has also graduated into the core Flutter engine.

A Portable UI Framework for All Screens

Flutter Mobile, Web, Desktop, and Embedded

It’s worth pausing for a moment to acknowledge the business potential of a high-performance, portable UI framework that can deliver beautiful, tailored experiences to such a broad variety of form factors from a single codebase.

For startups, the ability to reach users on mobile, web, or desktop through the same app lets them reach their full audience from day one, rather than having limits due to technical considerations. Especially for larger organizations, the ability to deliver the same experience to all users with one codebase reduces complexity and development cost, and lets them focus on improving the quality of that experience.

With support for mobile, desktop, and web apps, our mission expands: we want to build the best framework for developing beautiful experiences for any screen.

Flutter for Web

This week, we are releasing the first technical preview of Flutter for the web. While this technology is still in development, we are ready for early adopters to try it out and give us feedback. Our initial vision for Flutter on the web is not as a general purpose replacement for the document experiences that HTML is optimized for; instead we intend it as a great way to build highly interactive, graphically rich content, where the benefits of a sophisticated UI framework are keenly felt.

To showcase Flutter for the web, we worked with the New York Times to build a demo. In addition to world-class news coverage, the New York Times is famous for its crossword and other puzzle games. Since avid puzzlers want to play on whatever device they’re using at the time, their development team was attracted to Flutter as a potential solution for their needs. Discovering that they could reach the web with the same code was a huge boon. At Google I/O this week, you can get a sneak peek of their newly refreshed KENKEN puzzle game, which runs with the same code on Android, iOS, web, Mac, and Chrome OS.

ken-gratulations puzzle

Here’s what Eric von Coelln, Executive Director of Puzzles at the New York Times has to say about their experiences with Flutter:

"The New York Times Crossword has more than 400,000 stand-alone subscriptions and is a daily ritual for puzzle solvers. Along with the Crossword, we’ve grown our portfolio of digital puzzles that reaches more than two million solvers each month.

We were already beginning to explore Flutter as a potential solution to the challenge of quickly developing engaging, high-quality mobile experiences. Now the addition of being able to publish to web makes Flutter an even more appealing option to quickly deploy across all of our user platforms. This update of our old Flash-based KenKen game into a multi-platform playable experience is something we’re excited to bring to our solvers this year.”

There’s lots more to say about Flutter for web than we have space for here, so check out the dedicated article about Flutter for web on the Flutter blog.

At this early stage, we’re eager to get your feedback on how you’d like to use Flutter for web. We expect to rapidly evolve the code, with a particular focus on performance, and harmonizing the codebase with the rest of the Flutter project.

Flutter for Mobile Devices

The core Flutter framework also receives an upgrade this week, with the immediate availability of Flutter 1.5 in our stable channel. Flutter 1.5 includes hundreds of changes in response to developer feedback, including updates for new App Store iOS SDK requirements, updates to the iOS and Material widgets, engine support for new device types, and Dart 2.3 featuring new UI-as-code language features.

As the framework itself matures, we’re investing in building out the supporting ecosystem. The architectural model of Flutter has always prioritized a small core framework, supplemented by a rich package community. In the last few months, Google has contributed production-quality packages for web views, Google Maps, and Firebase ML Vision, and this week, we’re adding initial support for in-app payments. And with over 2,000 open source packages available for Flutter, there are options available for most scenarios.

One particularly exciting project that we’re announcing this week at I/O is the ML Kit Custom Image Classifier. Built using Flutter and Firebase, it offers an easy-to-use app-based workflow for creating custom image classification models. You can collect training data using the phone's camera, invite others to contribute to your datasets, trigger model training, and use trained models, all from the same app.

Flutter ML Kit: create datasets, collaborate to collect data, train model, run inference

Flutter continues to grow in popularity and adoption. A growing roster of demanding customers including eBay, Sonos, Square, Capital One, Alibaba and Tencent are developing apps with Flutter. And they’re having fun! Here’s what Larry McKenzie, a senior developer at eBay had to say about Flutter:

“Flutter is fast! Features that once took us multiple days to implement can be finished in a single day. Many problems we used to spend a lot of time on, simply no longer occur. Our team can now focus on creating more polished user experiences and delivering functionality. Flutter is enabling us to exceed expectations!”

More broadly, LinkedIn recently conducted a study that showed Flutter is the single fastest-growing skill among software engineers, based on site members claiming it on their profile over the last 12 months. And in the recent 2019 StackOverflow developer survey, Flutter was listed as one of the most-loved developer frameworks.

Flutter for Desktop

Flutter is also being used on the desktop. For some months, we’ve been working on the desktop as an experimental project. But now we’re graduating this into Flutter engine, integrating this work directly into the mainline repo. While these targets are not production-ready yet, we have published early instructions for developing Flutter apps to run on Mac, Windows, and Linux.

Another quickly growing Flutter platform is Chrome OS, with millions of Chromebooks being sold every year, particularly in education. Chrome OS is a perfect environment for Flutter, both for running Flutter apps, and as a developer platform, since it supports execution of both Android and Linux apps. With Chrome OS, you can use Visual Studio Code or Android Studio to develop a Flutter app that you can test and run locally on the same device without an emulator. You can also publish Flutter apps for Chrome OS to the Play Store, where millions of others can benefit from your creation.

Flutter for Embedded Devices

As the final example of Flutter’s portability, we offer Flutter embedded on other devices. We recently published samples that demonstrate Flutter running directly on smaller-scale devices like Raspberry Pi, and we offer an embedding API for Flutter that allows it to be used in scenarios including home, automotive and beyond.

Perhaps one of the most pervasive embedded platforms where Flutter is already running is on the smart display operating system that powers the likes of Google Home Hub.

Within Google, some Google-built features for the Smart Display platform are powered by Flutter today. And the Assistant team is excited to continue to expand the portfolio of features built with Flutter for the Smart Display in the coming months; the goal this year is to use Flutter to drive the overall system UI.

Other Resources

We often get asked by developers how they can get started with Flutter. We are pleased today to announce a comprehensive new training course for Flutter, built by The App Brewery, authors of the highest-rated iOS training course on Udemy. Their new course has over thirty hours of content for Flutter, including videos, demos and labs, and with Google’s sponsorship, they are announcing today a time-limited discount of this course from the retail price of $199 to just $10.

Many developers are creating inspiring apps with Flutter. In the run-up to Google I/O, we ran a contest called Flutter Create to encourage developers to see what they could build with Flutter in 5KB or less of Dart code. We had over 750 unique entries from around the world, with some amazing examples that pushed what we imagine would be possible in such a small size.

Today, we’re announcing the winners, which can be found on flutter.dev/create. Congratulations to the overall winner, Zebiao Hu, who wins a fully-loaded iMac Pro worth over $10,000!

Flutter is no longer a mobile framework, but a multi-platform framework that can help you reach your users wherever they are. We can’t wait to see what you’ll build with Flutter on the web, desktop, mobile, and beyond!

Launching Flutter 1.2 at Mobile World Congress

Posted by the Flutter team

The Flutter team is coming to you live this week from Mobile World Congress in Barcelona, the largest annual gathering of the mobile technology industry. One year ago, we announced the first beta of Flutter at this same event, and since then Flutter has grown faster than we could have imagined. So it seems fitting that we celebrate this anniversary occasion with our first stable update release for Flutter.

Flutter 1.2

Flutter 1.2 is the first feature update for Flutter. We've focused this release on a few major areas:

  • Improved stability, performance and quality of the core framework.
  • Work to polish visual finish and functionality of existing widgets.
  • New web-based tooling for developers building Flutter applications.

Having shipped Flutter 1.0, we focused a good deal of energy in the last couple of months on improving our testing and code infrastructure, clearing a backlog of pull requests, and improving performance and quality of the overall framework. We have a comprehensive list of these requests in the Flutter wiki for those who are interested in the specifics. This work also included broader support for new UI languages such as Swahili.

We continue to make improvements to both the Material and Cupertino widget sets, to support more flexible usage of Material and continue to strive towards pixel-perfect fidelity on iOS. The latter work includes support for floating cursor text editing, as well as showing continued attention to minor details (for example, we updated the way the text editing cursor paints on iOS for a faithful representation of the animation and painting order). We added support for a broader set of animation easing functions, inspired by the work of Robert Penner. And we added support for new keyboard events and mouse hover support, in preparation for deeper support for desktop-class operating systems.

The plug-in team has also been busy in Flutter 1.2, with work well underway to support in-app purchases, as well as many bug fixes for video player, webview, and maps. And thanks to a pull request contributed by a developer from Intuit, we now have support for Android App Bundles, a new packaging format that helps in reducing app size and enables new features like dynamic delivery for Android apps.

Lastly, Flutter 1.2 includes the Dart 2.2 SDK, an update that brings significant performance improvements to compiled code along with new language support for initializing sets. For more information on this work, you can read the Dart 2.2 announcement.

(As an aside, some might wonder why this release is numbered 1.2. Our goal is to ship a 1.x release to the 'beta' channel on about a monthly basis, and to release an update approximately every quarter to the 'stable' channel that is ready for production usage. Our 1.1 last month was a beta release, and so 1.2 is therefore our first stable release.)

New Tools for Flutter Developers

Mobile developers come from a variety of backgrounds and often prefer different programming tools and editors. Flutter itself supports different tools, including first-class support for Android Studio and Visual Studio Code as well as support for building apps from the command line, so we knew we needed flexibility in how we expose debugging and runtime inspection tools.

Alongside Flutter 1.2, we're delighted to preview a new web-based suite of programming tools to help Flutter developers debug and analyze their apps. These tools are now available for installation alongside the extensions and add-ins for Visual Studio Code and Android Studio, and offer a number of capabilities:

  • A widget inspector, which enables visualization and exploration of the tree hierarchy that Flutter uses for rendering.
  • A timeline view that helps you diagnose your application at a frame-by-frame level, identifying rendering and computational work that may cause animation 'jank' in your apps.
  • A full source-level debugger that lets you step through code, set breakpoints and investigate the call stack.
  • A logging view that shows activity you log from your application as well as network, framework and garbage collection events.

We plan to invest further in this new web-based tooling for both Flutter and Dart developers and, as integration for web-based experiences improves, we plan to build these services directly into tools like Visual Studio Code.

What's next for Flutter?

In addition to the engineering work, we took some time after Flutter 1.0 to document our 2019 roadmap, and you'll see that we've got plenty of work ahead of us.

A big focus for 2019 is growing Flutter beyond mobile platforms. At Flutter Live, we announced a project codenamed "Hummingbird", which brings Flutter to the web, and we plan to share a technical preview in the coming months. In addition, we continue to work on bringing Flutter to desktop-class devices; this requires work both at the framework level as described above, as well as the ability to package and deploy applications for operating systems like Windows and Mac, in which we're investing through our Flutter Desktop Embedding project.

Flutter Create: what can you do with 5K of Dart?

This week, we're also excited to launch Flutter Create, a contest that challenges you to build something interesting, inspiring, and beautiful with Flutter using five kilobytes or less of Dart code. 5K isn't a lot -- for a typical MP3 file, it's about a third of a second of music -- but we're betting you can amaze us with what you can achieve in Flutter with such a small amount of code.

The contest runs until April 7th, so you've got a few weeks to build something cool. We have some great prizes, including a fully-loaded iMac Pro developer workstation with a 14-core processor and 128GB of memory that is worth over $10,000! We'll be announcing the winners at Google I/O, where we'll have a number of Flutter talks, codelabs and activities.

In closing

Flutter is now one of the top 20 software repos on Github, and the worldwide community grows with every passing month. Between meetups in Chennai, India, articles from Port Harcourt, Nigeria, apps from Copenhagen, Denmark and incubation studios in New York City, USA, it's clear that Flutter continues to become a worldwide phenomenon, thanks to you. You can see Flutter in apps that have hundreds of millions of users, and in apps from entrepreneurs who are bringing their first idea to market. It's exciting to see the range of ideas you have, and we hope that we can help you express them with Flutter.

Attendees of a Flutter deep dive at Technozzare, SRM University.

Finally, we've recently launched a YouTube channel exclusively dedicated to Flutter. Be sure to subscribe at flutter.dev/youtube for shows including the Boring Flutter Development Show, Widget of the Week, and Flutter in Focus. You'll also find a new case study from Dream11, a popular Indian fantasy sports site, as well as other Developer Stories. See you there!

Dart Developer Summit 2016 Videos: Soundness, AngularDart 2.0, and the Fastest Growing Language at Google

Posted by Filip Hracek, Program Manager, Dart
Videos from last month’s Dart Developer Summit are up on YouTube and we thought we’d cherry-pick the highlights for you. The summit keynote is a summary of all the major news and of the direction the team is taking now. It’s where we announced that Dart is the fastest growing language at Google. Teams switching to Dart report up to twice the productivity and development speed of what they had previously.

Next, AngularDart 2.0 was launched in a presentation by Ferhat Buyukkokten and Matan Lurey. They showed how they made the framework’s output 40% smaller and 15% faster in the 4 months since AngularDart got its own dedicated team. They also showed our 60 fps table using setState(), and the new testing framework called NgTestBed.
Later in the day, Ted Sander launched AngularDart Components — the material design widgets Google is using in customer-facing apps like AdWords and AdSense. Hundreds of Google engineers work with these components every day. Watch the video to learn how they make our teams more productive, and our web apps more performant.
If you’re interested  in language design, watch Sound Dart, a talk by Leaf Petersen in which he explains Dart’s strong mode. With strong mode, Dart’s type system becomes sound, so that when you write types they are guaranteed to be correct (while still allowing you to write dynamically typed code where you want the flexibility). This differentiates strong-mode Dart from many popular compile-to-JavaScript languages, and improves both performance and developer productivity.

Another presentation that made waves was the Flutter keynote from Day 2 of the summit. Eric Seidel impressed the audience by showing just how fast mobile development can be with Flutter.

After Eric’s talk, John McCutchan and Todd Turnidge went into details about Flutter hot reloading. They also showed, for the first time, code rewind in Dart.

These are just 6 out of the 18 talks that are available on YouTube. For example, Will Ekiel’s talk titled Learnings from building a CRM app at Google gives a perspective on managing a product built with Dart and deploying it across both web and mobile. Another interesting practical presentation on using Dart in production is the one given by Faisal Abid and Kevin Birch about their large-scale JS-to-AngularDart rewrite. And the list goes on. We’re very happy how the event went, and we’re already looking forward for next year’s summit. In the meantime, follow our blog, our Twitter account, our G+ page, or join the conversation in any other way. We want to hear from you. Thanks for building in Dart.

Dart in 2017 and beyond

We’re here at the Dart Developer Summit in Munich, Germany. Over 250 developers from more than 50 companies from all over the world just finished watching the keynote.

This is a summary of the topics we covered:

Dart is the fastest growing programming language at Google, with a 3.5x increase in lines of code since last year. We like to think that this is because of our focus on developer productivity: teams report 25% to 100% increase in speed of development. Google has bet its biggest business on Dart — the web apps built on Dart bring over $70B per year.

Google AdSense recently launched a ground-up redesign of their web app, built with Dart. Earlier this year, we announced that the next generation of AdWords is built with Dart. There are more exciting Dart products at Google that we’re looking forward to reveal. Outside Google, companies such as Wrike, Workiva, Soundtrap, Blossom, DG Logic, Sonar Design have all been using and enjoying Dart for years.

Our five year investment in this language is reaping fruit. But we’re not finished.

We learned that people who use Dart love its terse and readable syntax. So we’re keeping that.

We have also learned that Dart developers really enjoy the language’s powerful static analysis. So we’re making it better. With strong mode, Dart’s type system becomes sound (meaning that it rejects all incorrect programs). We’re also introducing support for generic methods.

We have validated that the programming language itself is just a part of the puzzle. Dart comes with ‘batteries included.’ Developers really like Dart’s core libraries — we will keep them tight, efficient and comprehensive. We will also continue to invest in tooling such as pub (our integrated packaging system), dartfmt (our automatic formatter) and, of course, the analyzer.

On the web, we have arrived at a framework that is an excellent fit for Dart: AngularDart. All the Google web apps mentioned above use it. It has been in production at Google since February. AngularDart is designed for Dart, and it’s getting better every week. In the past 4 months, AngularDart’s output has gotten 40% smaller, and our AngularDart web apps got 15% faster.

Today, we’re launching AngularDart 2.0 final. Tune in to the next session.

With that, we’re also releasing — as a developer preview — the AngularDart components that Google uses for its major web apps. These Material Design widgets are being developed by hundreds of Google engineers and are thoroughly tested. They are written purely in Dart.

We’re also making Dart easier to use with existing JavaScript libraries. For example, you will be able to use our tool to convert TypeScript .d.ts declarations into Dart libraries.

We’re making the development cycle much faster. Thanks to Dart Dev Compiler, compilation to JavaScript will take less than a second across all modern browsers.

We believe all this makes Dart an even better choice for web development than before. Dart has been here for a long time and it’s not going anywhere. It’s cohesive and dependable, which is what a lot of web developers want.

We’re also very excited about Flutter — a project to help developers build high-performance, high-fidelity, mobile apps for iOS and Android from a single codebase in Dart. More on that tomorrow.

We hope you’ll enjoy these coming two days. Tune in on the live stream or follow #dartsummit on Twitter.

By Filip Hracek, Developer Relations Program Manager

A sizzling open source release for the Australian Election site

Originally posted on the Geo Developers Blog

One of the best parts of my job at Google is 20 percent time. While I was hired to help developers use Google’s APIs, I value the time I'm afforded to be a student myself—to learn new technologies and solve real-world problems. A few weeks prior to the recent Australian election an opportunity presented itself. A small team in Sydney set their sights on helping the 15 million voters stay informed of how to participate, track real-time results, and (of course) find the closest election sausage sizzle!


Our team of designers, engineers and product managers didn't have an immediate sense of how to attack the problem. What we did have was the power of Google’s APIs, programming languages, and Cloud hosting with Firebase and Google Cloud Platform.



The result is a mish-mash of some technologies we'd been wanting to learn more about. We're open sourcing the ausvotes.withgoogle.com repository to give developers a sense of what happens when you get a handful of engineers in a room with a clear goal and a immovable deadline.

The Election AU 2016 repository uses:

  • Go from Google App Engine instances to serve the appropriate level of detail for users' viewport queries from memory at very low latency, and
  • Dart to render the live result maps on top of Google Maps JavaScript API using Firebase real time database updates.

A product is only as good as the attention and usage is receives. Our team was really happy with the results of our work:

  • 406,000 people used our maps, including 217,000 on election day.
  • We had 139 stories in the media.
  • Our map was also embedded in major news websites, such as Sky News.

Complete setup and installation instructions are available in the GitHub README.

By Brett Morgan, Developer Programs Engineer