Google I/O ’21 Flutter Roundup for Web, iOS, and Android

Google I/O may have been remote this year, but the Googlers didn’t let that slow them down. After five hours of trying to take notes on it all, I finally let go of the keyboard, grabbed the desk, and held on for the ride. There’s far too much to cram into one article. This is only the first, so be sure to follow us and come back for more! First, let’s start with something near and dear to my heart, Flutter! It’s no exaggeration to say every few minutes someone would come into the Flutter “tent” and say “Wow, everyone’s in here!” After six or seven of these, I decided to take a tour around and see for myself. Sure enough, none of the other “tents” had even half as many people as Flutter, not even Android. There was plenty of open space, and “chairs” at the private chat “tables” were easy to come by. Then, back to the Flutter “tent”. It was so crowded, people joked they couldn’t find their own avatars, and the lines for private “tables” were long. But why? Because Flutter’s been gaining speed faster than an alpine avalanche!

• New Material Design Components
• Sound Null Safety in Dart
• Flutter for Web is Stable
• The ability to release to Windows, Mac, and Linux Desktops
• Dart FFI (Foreign Function Interface)
• Using Dart Server-Side and for Cloud Functions, Full Stack in one language!
• Cloud Functions in Dart

And more!

And all this was before Google I/O even started! The “What’s New in Flutter” keynote by Zoe Fan and Chris Sells covered a lot of ground. If you have 25 minutes to spare, then you can hear it all for yourself here. There was a dizzying array of announcements, like improvements in Flutter Web, iOS page transitions, and new developments in payment processing.

Zoe also said something that made me jump up and take notice. She said, “Xbox”.

That’s right, Xbox. This is possible because of support for Windows UWP which you can now find in the dev channel. With UWP your apps can go where no Flutter app has gone before, or at least where regular Windows apps can’t run.

Xbox… What’s next, Toyotas? As an old mentor of mine used to say, “Be careful what you wish for.” During Flutter Engage, the team announced Toyota is now using Flutter for their infotainment systems. So yes, Toyotas too.

This brings us to a question a few YouTubers keep asking: “Do any big apps or big companies use Flutter?” I think it’s time for someone to do more than answer this question, it’s time to kill it once and for all. With that in mind, here are only a few big companies that are using Flutter right now:

• Alibaba (Alibaba scares Amazon)
  • The iOS app is #20 in the App Store’s shopping category, with 208k ratings and a 4.7-star rating
  • In the Play Store, Alibaba’s Android version has a 4.4-star rating after 1.2 million reviews. Not downloads, reviews!
• Grab (Southeast Asian super-app, 200 Million downloads across iOS and Android)
  • Grab’s engineers report a 33% reduction in development time after making the switch to Flutter
  • 4.5-stars after 6.5 Million reviews on the Play Store
  • 4.3-stars on the App Store
• Toyota
  • All Toyota’s in-dash Infotainment Systems are coming to Flutter
• Canonical
  • Ubuntu’s installer is also coming to the Dart Side
  • Canonical now recommends Flutter for the development of all Ubuntu Desktop apps
• Google Pay
  • They cut the size of their codebase by a million lines by going Flutter!
• BMW
  • 2 Million users in 5 countries
  • 300 Flutter Engineers, one of the largest Flutter teams in the world
• NuBank
  • They’re the largest bank outside Southeast Asia, with 35 Million customers
  • They improved their merge success rate by 30% over native development once they came to Flutter
  • Flutter PRs are taking a whopping 85% less time to merge than non-Flutter PRs!
• Kotak
  • It’s one of India’s largest financial institutions and built their trading app in Flutter
  • They shipped their Flutter iOS and Android apps within six months of starting them!
  • Now they’re taking the next step and taking that same codebase to the web

But the biggest bomb of all has to be Tencent. Some in the west may not know it, but Tencent is the company behind WeChat. Hold on to your chair if you’ve never heard of them because this could knock you out of it:

• 6 Million Play Store Reviews
• 1.2 Billion Monthly Active Users
• 230 countries and regions
• 45 Billion messages daily!

Take that, WhatsApp. Tencent has already ported 20 apps to Flutter. Their experience was so positive, they decided to trust WeChat and its 45 Billion daily messages to Flutter, too. In fact, the WeChat for Work team saw a 25% decrease in development time compared to other tool kits they’ve used. Other companies using Flutter include:

• Nationwide Insurance
• Huntington Bank
• MGM Grand
• Groupon
• Square
• Capital One
• eBay

It would appear the question is finally dead. Flies are starting to land on it.
Moving on… So what’s new in the Flutterverse?

Get Paid

Flutter developers love to create Flutter apps, but there’s one thing they love even more and that’s getting paid. So, in addition to the Flutter team’s support for AdMob and adding banners and inline ads, now there’s support for Google Ad Manager!

Plus, taking payments just got a lot easier with the new In-App Purchase Codelab. It takes you by the hand and walks you through how to take payments in both your iOS and Android apps!

Flutter Web

Flutter Web is evolving fast. It seems as if every time we look up there are new developments, and I/O was no exception.

People have been asking for improvements to the renderers. In the HTML renderer, they added support for font features. Now, text appears in the right place when hovering, thanks to the ability to use the canvas APIs to render text.

Now there’s support for both shader masks and computeLineMetrics, allowing web apps to enjoy the benefits of these, too. This allows us to do things like fade-out transitions, and more.

And one that’s sure to be a big hit, now you can use the layout explorer in Flutter DevTools when creating a web app, too.

iOS

Will Flutter devs focusing on iOS finally begin to feel some love?

Yes! Let’s start with a small warm-up, Cupertino page transitions. There has been a whopping 75% decrease in the time it takes to render the animation frames. It only takes a quarter as much time as it used to, but that’s only the warm-up.

Let’s talk about Metal or, rather, iOS jank.

One thing to keep in mind is that Flutter can cache shaders during a “training run”. They’re then bundled within your app. This way they’re compiled before your app even renders its first frame, and this prevents jank.

Or it did, until Apple deprecated OpenGL.

After OpenGL was deprecated the Flutter team made Metal the default backend, and the jank began. Tests revealed that, sure enough, the jank was being caused by several things going on behind the scenes, and all were traced to the shaders.

And now there may be some help on the horizon. On the dev channel is a preview of Skia’s new support for shader “warm-up” on Metal. Once again, Flutter will compile the bundled shaders before the first frame is even rendered.

However, like any good pro, there are always some cons. You still end up with more shaders than you would have if you’d been able to use the OpenGL shaders, and the compiled machine code remains cached until the physical device is rebooted. The app size is larger since it contains the compiled shaders, and there is some latency as the bundled shaders are precompiled on startup.

It’s an improvement, but the Flutter team has made it clear they are nowhere near done working on this issue. The ability to warm-up shaders on Metal is an important step to a permanent fix, but it’s still only one step.

Android, Deferred Components

With Flutter Web, we can use something called Deferred Imports to reduce the amount of data required to render the first frame. This is crucial for those doing more than one screen in a web app, as the search engines will judge your load time by when the first page loads.

But what does that have to do with a mobile app? I’m glad you asked.

Imagine a world where some parts of the user’s app get downloaded dynamically, at runtime. These parts are compiled ahead of time, but the app decides which ones to load, and when, at runtime. What could you do with that? Perhaps you could conditionally download some components and not others.

This can be used to significantly reduce the size of your app. When the team implemented a new version of the Flutter Gallery using Deferred Components, they saw a 46% decrease in the size of the initial install.

You can check it out here.

That’s all for now, check back again for more on tooling, DevTools, what’s new in Dartpad, and more!