Flutter is stepping up its game in 2023

Pinch is already getting into its 4th year of using Flutter, and what a journey it’s been to see the framework maturing. We’re always curious about the yearly Flutter keynote by Google, a great way to keep track of what’s new with Flutter and Dart, and where we’re heading. This time hosted at the end of January, 2023 was off to a great start. We even hosted an official viewing party together with the Flutter Netherlands community, awesome crowd!

The keynote was packed with new things, giving us better developer tools, better performance, and more! Let’s dive in 👇

Next-generation rendering

With Flutter 3.7, we’re finally getting the first, stable taste of Flutter’s new rendering engine: Impeller. The rendering engine is the driving force of Flutter’s UI, taking care of drawing every pixel you see on the screen. Previously, we’ve been using the Skia engine within Flutter: a cross-platform rendering engine acquired by Google in 2005. No wonder it is also the driving force of the likes of Google Chrome, Android, and ChromeOS. With Impeller though, we’re getting a tailormade rendering engine for Flutter, boosting performance drastically by taking full advantage of new chipsets and modern, low-level Graphics APIs like Metal on iOS and Vulkan on Android.

With Impeller being built from the ground up, it also paved the way for brand-new use cases. Custom shader support has been added, with these demo’s already showing us some cool stuff we can accomplish with that. And this is not limited to just mobile, custom shaders can also be used on the web!
Next to that, Flutter also started development on 3D support. The Flutter Forward keynote showed us we can easily use .glb files in our project, not much different from how we would show an image for example. It’s very early days, and the use cases might be limited for now looking at mobile apps, but let’s see where it might take us. Augmented reality, anyone?

Better platform interoperability

Creating an app from scratch with Flutter and Dart is a breeze, but you’ll almost always encounter cases where you need to communicate with platform code. You might embed a Flutter component on a web page and would like to communicate with it, or have SDKs for iOS or Android native that you need to call from your Dart code. We’ve always put an asterisk on third-party SDK support for clients that are interested in using Flutter, but with these new announcements, things just got a whole lot better on that side.

For Flutter web, we now got a preview of something called element embedding. This enables us to add any Flutter content to a standard <div> , making it a normal web component, integrating it with the web DOM and even supporting the use of CSS.
For communication on web, we can make use of Javascript. Some big improvements are being made to the JS package to allow seamless interoperability. You can now call any Dart function from your Javascript code by simply annotating a Dart function with @JSExport. Check out this nice demo to see this in practice!

Mobile app development also just got better. Bridging to the native sides was always fairly simple, but making use of a native SDK and having to bridge to it still required us a fair amount of work on- and knowledge of the native sides. At Flutter Forward we got a glimpse of something the Flutter team is working on: allowing developers to easily create bindings to native SDKs and use those on the flutter side. Until now, we’ve always been dependent on either others creating plugins that bridged to these SDKs, or ourselves creating those bridges. Now, with JNIgen and FFIgen, we just run a simple command that creates these bindings and gives us access to SDKs written in Kotlin, Swift, or Objective-C. Awesome stuff, and a real-time- and lifesaver. Check out this sample project for a first taste!

WebAssembly support

‘Flutter runs on everything’ is a pretty bold statement, and even though Flutter runs on a broad number of devices and architectures, the landscape keeps on changing.

Luckily Flutter also keeps an eye out for change, and with Flutter Forward we got a small peak at early support for WebAssembly, Wasm for short. WebAssembly opens the door to languages other than Javascript to the web, aiming at providing high-performance applications on web pages. It’s been a highly requested feature for Flutter, and with the growing number of web browsers supporting Wasm, a great step for Flutter Web to move forward!

Announcing Dart 3 alpha

Even though officially announced as Dart 3a, meaning it is still alpha, we already got to see where Dart as a programming language will be heading with its next major release.

With Dart 3, the programming language is now officially a sound null-safe only language. We’re no longer able to run Dart code in an unsound or mixed way, which improves Dart’s performance and reduces overhead and complexity.

With Dart 3, we got some new language features as well, the biggest of the bunch being records and patterns.

Where we normally create new classes to hold data together, records allow us to not have to do this but instead have an anonymous composite holding these values. This removes potentially unneeded overhead in code, so for a function needing to return a pair of values we could do something as simple as this:

Now, to handle the return data of this function, we can make use of patterns! Patterns allow us to destructure the composite data, so when using the above function we can make use of patterns to handle the return-data like this:

Very cool stuff, and there’s more coming with Dart 3! For a full list of new features, check out this official announcement.

Flutter News Toolkit

With Pinch working on a lot of news-related apps, the announcement of the Flutter news toolkit was a big trigger within the company. We tend to stay with native for news apps due to our experience, but with the news toolkit, things might just start to change.

The Flutter team has been working closely with Google’s GNI team, a team working closely with publishers and journalists to create a better news ecosystem. With the Flutter News Toolkit, we get component templates to easily build a foundation for apps related to news or content in general, which in turn can save development time of up to 80% depending on the use case! A few features that come with the toolkit to easily implement are:

• User onboarding: re-engage your audience with push notifications permissions; acquire ad tracking permissions
• Account creation/login: authenticate through your platform and user social networks (such as Google login); create passwordless accounts
• Content feeds and content pages: display news articles, videos, pictures, ads, and newsletter sign-up prompts
• Monetization: easily add subscriptions and different ad formats
• Search: allow user searches for articles by keyword or click into popular searches
• Settings: allow user preferences for notifications, login, and ads tracking

We’re keen to try out the toolkit ourselves and see what this can bring for our clients in the media landscape. For more information on the Flutter News Toolkit, check out the official announcement.