Seamless multi-platform app development with Flutter
Discover how Flutter supports creating beautiful experiences on any device.
With its latest release of Flutter 2, Flutter’s goal as a multi-platform UI toolkit is to “fundamentally shift how developers think about building apps, starting not with the platform they’re targeting, but with the experience they want to create” as quoted by Tim Sneath, Product Director of Flutter & Dart at the Flutter Engage event earlier in March 2020.
Prior to this latest release, Flutter had four pillars focused on being a beautiful, fast, open, and productive platform for building cross platform applications. With the release of Flutter 2, a new pillar was introduced: ‘portable’, which represents a major milestone for Flutter now having stable support for native applications on mobile, web, desktop, and embedded devices from a single codebase. Flutter truly is the first UI platform that is designed for an ambient computing world.
In this article, we explore what the portable pillar means to Flutter. We look at the features supporting web apps and multiple-screen form factors, and how Toyota is embracing Flutter for its vehicle infotainment systems.
From mobile app to web app
Flutter started as a UI framework for building beautiful iOS and Android apps. However, the vision was always for Flutter to provide a portable framework that helps developers build natively compiled apps wherever their users may be. As almost every device has a web browser, targeting the web was the natural next step for Flutter.
Flutter 2, delivers production-quality support for the web, meaning you can build beautiful performant applications for iOS, Android, and web browsers from a single code base. The emphasis is on creating web apps — installable progressive web apps and rich, interactive single-page apps — not static content websites for now, which gives Flutter developers a seamless path to go from their current mobile apps to a whole new user base on the web.
With Flutter 2, it’s like your apps get a free upgrade. The web is just another device target. Run Flutter Create, and it automatically generates a web directory with an index HTML file ready to run in your favorite browser.
As with mobile apps, there are 2 compilers for web apps. dev_compiler is used during development and dart2js for deployment. Separate compilers for development and deployment are optimized for dev cycle productivity on one hand, and performance for a production app that just runs fast. Flutter apps are compiled to native machine code meaning your finished application doesn’t have to go through a virtual machine or a JavaScript interpreter when live.
The Flutter dev_compiler offers the same smart features offered by the JIT compile. So it only recompiles the code that was affected by changes and pushes the deltas, ensuring a fast development loop. However, unlike hot reload for mobile — which remembers your app’s state — for web apps you get a hot restart and re-create your state manually.
Just like with mobile apps built in Flutter, plugins enable apps to talk to a platform’s native libraries. Many existing Flutter plugins on pub.dev are already supporting the web. When running a Flutter app on the web, you can access JavaScript libraries through these plugins. To check if a plugin is supported, just go to pub.dev and search for it. Below the plugin listing are a set of labels indicating the supported platforms.
If you have a plugin you want to update to provide web support, see the article ’add support for platforms in an existing plugin project’ for details on how to do it.
While you can target the web with the same code you use for your mobile apps, you’ll want to optimize the experience for your users. You can add dynamic layout features using constraints to improve the user experience like switching a single column layout to two columns if the browser offers more screen real estate.
Similarly, you may consider adding web-specific navigation features, such as scroll bars, and mouse or keyboard interactions. For a better viewing experience on the web, you would want to wrap a ListView in a Scrollbar and have the mouse cursor display when you hover over a widget. There is even a shortcuts widget you can use to add keyboard shortcuts in your applications.
To learn more, visit flutter.dev/web.
Support for foldables and dual-screen devices
As we said before, Flutter is designed for an ambient computing world. There are many more screens than just mobile, web, and desktop emerging. From wearables to in home devices, smart appliances, and even foldable and dual-screen devices making their way into our daily lives. These new form factors are great for productivity as they can adapt to the user’s needs, whether they’re creating content, playing a game, watching a video, typing, reading, or browsing the web.
These form factors mean you have new scenarios and user experience possibilities to explore. Apps can run on two screens, with more screen real estate to display content and interact with users. When adapting your Flutter app to exist on two screens, you can use dual-screen design patterns, such as the List-Detail view, Companion Pane, and other ways to organize the app UI.
The foldable form factor also provides opportunities for apps to share content with another app. For example, adding drag-and-drop functionality to your app so content can be moved between apps that are running side-by-side.
At Flutter Engage, Microsoft announced that they are collaborating with Google to bring foldable support to Flutter. Microsoft is contributing code to enable Flutter apps to take advantage of these new opportunities with devices such as the Surface Duo and even devices from manufacturers like Samsung,
With Flutter 2, foldable support is available in all the Flutter widgets. For example, when you use the dialogue, it is hinge aware and will display on the right or left pane.
There is also a new widget to help position assets: the two-pane widget. You can use this widget to place assets on the right or left pane. It also displays correctly on a single-screen phone or tablet-like device. The two-pane widget makes it easy to support the new form factors.
Toyota’s in-vehicle user experience with Flutter
While Flutter 2 enables developers to create beautiful apps for mobile, web, desktop, and even emerging form factors, this isn’t the limit to Flutter’s flexibility. To be a truly portable platform that ships anywhere your users may be, Flutter also is building support for embedded devices. Toyota recently announced that the future of its vehicle infotainment systems would be powered by Flutter to bring a best-in-market digital experience to one of the largest car manufacturers in the world.
Daniel Hall, Chief Engineer of Toyota Motor North America, spoke about this partnership and why they chose Flutter at Flutter Engage:
- Toyota customers expect a high-performance in-vehicle user experience to match the overall quality of Toyota vehicles. Flutter’s rendering engine provides good performance in a constrained environment, and features such as AOT compilation give Toyota the consistency it’s looking for in an in-vehicle technology.
- Flutter enables Toyota to provide an in-vehicle user experience that is on par with what customers have come to expect from their smartphones. Flutter’s cross-platform mechanics, which Toyota believes has packaged touch mechanics that just feel right no matter where they run, helps Toyota avoid the sluggish performance and poor user experience typical of many embedded systems.
- Toyota was also sold on Flutter’s developer experience. Although Toyota is releasing their apps on a single-target platform, the ability to hot-reload on the desktop and deliver to iOS and Android tablets has proven helpful for physical and digital user testing. These faster iteration cycles enable Toyota to collect and integrate feedback from its customers earlier and more often, which helps them create the best experience.
Toyota uses Flutter’s Embedder API to take advantage of the technology in their automotive-grade Linux-powered infotainment systems. The Flutter engine’s architecture makes it easy to embed in their target environment by cross-compiling the engine and wrapping it in an embedder. The Embedder API is easy to use and enables Toyota to integrate Flutter apps with in-vehicle systems.
Taking advantage of Dart’s language design and the Flutter SDK software design, Toyota has created several in-house tools that enhance Flutter’s developer ergonomics by extending them to include Toyota’s design process. Toyota’s goal is to have a workflow that enables design tools to generate code to run and validate software immediately. For example, Flutter’s approach to declarative UI and code as configuration enables Toyota to efficiently perform code generation based on designs without complicated or confusing middle tiers.
While developing these Toyota-specific tools, Flutter’s open-source principles and high-growth developer community have been critical to Toyota’s success. Without the support of the large and open ecosystem, Toyota believes that it wouldn’t have been able to extend Flutter to enable their in-vehicle use cases.
Toyota, sees working with open-source software as a positive investment in their in-vehicle user experiences, and looks forward to playing a role in the open-source Flutter community.
Flutter: build beautiful apps for any platform
From cars to web browsers, laptops to phones, desktops to tablets, and smart home devices, Flutter is a truly portable UI toolkit with a mature SDK that’s ready to go wherever you need to meet your users’ needs. It runs on the platforms that are important to you and works with the Google SDKs and services you already love using. It brings together beautiful, fast user experiences with a productive development environment that lends itself to exploration and iteration, all delivered open-source from Google with a vast global community of developers around the world contributing to its exponential growth over the past few years. There’s nothing quite like it.
For more on Flutter head to Flutter.dev, follow the team @flutterdev on Twitter, and subscribe to their channel on YouTube for fresh content and tutorials to further your developer journey.
What do you think?
Do you have thoughts on developing multi-platform apps with Flutter? Let us know in the comments below or tweet using #AskPlayDev and we’ll reply from @GooglePlayDev, where we regularly share news and tips on how to be successful on Google Play.
