Flutter 2 is here!
Yesterday Google unveiled the news at the Flutter Engage virtual event, along with exciting announcements and updates (too many to include here)!
We had been eagerly awaiting the event as soon as it was announced in late 2020. Prior to the event, our team created our customized Dashatars:
March 3 finally arrived! Since we could not gather in person, the Flutter team brought the magic to the virtual stage. Our team gathered in a Google Meet to watch it all unfold and chat in real time about the announcement. Below are some of the moments that stood out most to us:
Keynote: Flutter 2 is here, supports 6 platforms and brings loads of new features
With the release of Flutter 2, it’s clear that Flutter is more than just a mobile framework — it truly is also “portable” and “flexible” — so much so that Flutter apps can work on six (yes, six!) different platforms including iOS, Android, web, macOS, Windows, and Linux. One of the major things we love about Flutter is that it empowers developers to build for all screens, not just iOS and Android. Almost any screen you can imagine could run Flutter. Mobile phone ✅ macOS desktop ✅ car infotainment ✅ (more on that later!). Overall, Flutter 2 is packed with updates!
One major update is that Flutter web is now stable!
We can cross this one off of our wishlist. During the keynote, we learned that Flutter for web is now stable! The Google team notes it’s best suited for building out an application experience on the web, which can be a good strategy to ensure that an application works on all devices that can access the web (think phone, tablet, desktop, and more!). While it is not ideal for building static websites, Flutter web is great for building powerful web-based tools, games, and progressive web apps (PWAs). We helped pilot Flutter web in the past but have mostly focused on building mobile apps for our clients. We’re excited that this update means that we can see what very good things we can build with clients using Flutter for web!
Dart 2.12 has also arrived, bringing null safety with it.
Flutter 2 would not be complete without an update to the Dart Language. With this update, null safety has officially landed! Notably, this update is not a breaking change, which means that developers can migrate code incrementally — and that null safe code can be used alongside code that has not yet been migrated. We also got a look ahead at what’s next for the language: static meta-programming. We’re very intrigued and hope to do some sleuthing into this functionality! Along with this Dart update, the Google team also announced some new DevTools. We really 💙 DevTools and are excited to try out Flutter Fix, a tool that migrates deprecated APIs in a codebase, keeping them safe and fresh.
What really caught our attention: Toyota is committed to using Flutter for in-car infotainment systems.
Daniel Hall, Chief Engineer at Toyota, discussed that Toyota is partnering with Flutter to build next-gen infotainment systems with Flutter for their vehicles. He outlined four main reasons why Toyota will be using Flutter:
1. High performance in a constrained environment.
2. Flutter will allow Toyota to build an in-vehicle user experience that lives up to user’s experiences and expectations — including smooth touch mechanics.
3. Flutter’s developer ergonomics allows for developers to make use of all the multi-platform tools.
4. Better customer experience as a result of faster iteration cycles.
This is huge! Not only is a major company like Toyota committing to Flutter, they’re using it in an innovative way with the Embedder API.
Companies that have been on the fence about trying out Flutter, take note! It can completely revitalize the app development process — whether you’re building apps for a mobile phone, or targeting a screen that provides directions, music, and more as you drive.
Additional Sessions provide more depth to all of the new Flutter updates
Tips on adding web support to a mobile app
The Flutter team’s goal is to provide developers with a portable framework that could help developers build natively compiled apps for any platform — including web. Mariam Hasnany and John Ryan said it best in this session: “The web is powerful and runs everywhere.” Because of this, the stable release is a major moment for Flutter Web since the beta was released.
The difference between Flutter mobile apps and web apps is the underlying engine they use. To add web support, the Flutter team replaced the C++ rendering engine used by mobile apps and instead mapped to browser APIs, DOM, or WebAssembly.
Ryan and Hasnany highlighted three main characteristics that developers should keep in mind as they go from mobile to web apps:
- Plug-ins: Make sure the plug-ins that are used in the mobile app are supported on the web application (visit pub.dev to check).
- Layout: Web apps can run on different form factors, so make sure to think about how to adjust the UI layout accordingly.
- Navigation: Don’t forget to add mouse and keyboard interactivity to make the app even better in a browser.
- Rendering mode: Learn about the two web renderers available for Flutter: HTML and CanvasKit. We like that there is flexibility here because they’re optimized for mobile and desktop browsers, respectively.
These tips will come in handy when it comes to adding web platform support for apps in the future!
The time has come to migrate to null safety!
In this session, Leaf Petersen provided an overview of how to migrate a package to sound null safety. He starts with an overview of the Dart team’s migration tool that makes it easy to migrate apps over to null safety. It can be run directly from the terminal and provides ample documentation — it does the hard work for you by providing direction for what you need to do in order to migrate to null safety. Once the migration tool has run, it makes a virtual copy of your code and gives you a preview (via a link) of what it will do once we choose to apply the migration.
This has been super helpful as we migrated packages to null safety so that we can have a final say in the changes we make, while ensuring that we’re doing what we need to do to make our packages null safe. The tool also has an interactive option which provides reasons that led the tool to suggest changes. This option is great for developers who might want more granular control over the migration of your packages to null safety.
Becoming the mythical designer-developer
In his talk, Filip Hráček discussed the importance of using good design to create perceived value when developing an app with Flutter. He defined perceived value as all the little bits you add to make an app satisfying to use. It can be just as important as core functionality in building an app that users will love (although it can’t fix an app that has no functionality to begin with!). Using some simple concepts, developers can increase the value of their apps and level-up their careers. Here are some of the elements Hráček recommended to pay attention to:
1. White space: Communicates meaning, hierarchy, or relatedness.
2. Typography
Consistency: Stick to one text theme throughout the whole app
Delight: Use fonts and spacing so your audience enjoys reading the app’s text.
3. Colors: Find a good palette and stick to it.
4. Iconography
5. Animations: Use a more natural `Curve` than the default Curves.linear (try `easeIn` or `easeOut` instead).
This session was packed with tips and ideas for improving an app with these little details and gave us some ideas for how to take our apps to the next level. Luckily, Flutter has a widget for almost everything, so implementing these little details is simple!
Monetizing a Flutter app
In this session, Andrew Brogdon and Zoey Fan presented the new Google Mobile Ads package, which is now out in open beta. It facilitates the use of the Google Mobile Ads SDK in Flutter apps, supporting both Google Ad Manager and AdMob. The presenters used this new package to show how to add banners inline in a list, which is a new format that wasn’t previously available.
The new package now supports native ads and inline banner ads, along with the previously supported overlay banner, interstitial, and rewarded video ads. These new formats will enable developers to monetize their apps without interrupting the user experience, which may provide a great incentive for companies to build apps in Flutter. We anticipate digging more into the SDK to see how we can make the most of it and help clients who are interested in using it to do the same.
Community Talks
We were pleased to see that Flutter Engage included eleven wonderful community talks! We’re focusing on just a few in this blog, but we highly recommend viewing the whole playlist here.
Flutter makes internationalization easy!
In this session, our own Domninik Roszkowski showed how it can be easy and convenient to add translations to any Flutter app. Using an approach introduced last year, it only takes a few simple steps to add support for up to 78 different languages. After you set it up, the translation files will be regenerated whenever you build your app or install packages. Dominik also provides step-by-step instructions in this blog post.
Adding internationalization is a sometimes overlooked step when it comes to building apps. However, Flutter makes it so easy, we highly recommend doing so to ensure that your app supports multiple languages from the beginning!
Material buttons ensure consistency across your application.
This session by Haris Samingan discussed the new Material button update and how to use them. The new material buttons are a simple way to style buttons to be used throughout the entire application by following a consistent design system.
Since the old material buttons could be deprecated as soon as July 2021, this was a great session on what developers need to know. Overall, Material buttons are a great way for developers to save time by not having to recreate a style and ensure consistency within a design.
Flutter plugins are essential to building applications!
This session by Kamal Shree and Lara Martín focused on the importance of package and plugin development. Whether developed by the Flutter Team or members of the Flutter Community, plugins and packages are essential to development by adding functionality to your code without having to create something bespoke.
Shree and Martín provided a blueprint for developing plugins and packages, from creating them to publishing them on pub.dev. They also provide a helpful overview of how Federated Plugins work by splitting support for different platforms. This is essential viewing for any developer looking for a great resource on plugins and packages, especially given that Flutter now supports six platforms!
The Future of Flutter is here!
Wow, that was a lot! According to Tim Sneath, over 150,000 production apps have been built with Flutter. We have a feeling that with all of the updates in Flutter 2, a lot more companies will be joining the Flutter fun in 2021!
Scarlett Wardrop contributed to this article.
.png)
