Author: Jan Arlukiewicz/LeanCode
At the end of August, we had some exciting Flutter happenings; not only did LeanCode take part in Flutter Vikings Conference in Oslo, but also a new stable version of Flutter 3.3 was announced! A new version came along with Dart 2.18.1 and brought some exciting widgets, features, DevTools, and useful VSCode extensions.
In this article, we bring the most important features of Flutter 3.3 closer and recall the biggest changes of the Flutter 3.0 version.
From Flutter 3.0 to Flutter 3.3 version — summary
Flutter 3.0 was released in May 2022, yet in September 2022, it got updated to the next version — Flutter 3.3.2. Right then, in May, Flutter 3.0 brought many significant changes that moved mobile development a little further.
- Among other updates, Google released FlutterFire — an official Flutter plugin for Firebase (a back-end development suite from Google).
- Additionally, app analysis became easier and effortless to debug — thanks to the Firebase Crashlytics update. Crashlytics also allows developers to track, detect and prioritize fixes, detect app issues and check which users are affected.
- With Flutter 3.0, Material Design 3 (MD3) became available in the Flutter development stage, which I will elaborate on later in this article. Implementing interfaces and retaining the MD3 standard has become easier, but full support is yet to come, as illustrated by this GitHub issue. Nevertheless, Flutter 3.0 opened the door to Material Design 3 components, unified UI, and more user-friendly and polished apps.
- On the other hand, unfortunately, Flutter ended support for Apple devices with iOS 9 and 10 — which means bad news for owners of iPhone 4S, 5, and 5C. However, the ‘newest’ iPhone 5C was released 9 years ago, and the average iPhone user changes their phone every 3 years, which doesn’t mean a lack of support for a large percentage of the market.
- Flutter 3.0 also started to support higher refresh rates for iOS devices that came along with iPhone 13 Pro — the first iPhone having a 120 Hz screen refresh rate, also called ProMotion by Apple.
- If you are into Flutter and love to develop games, what might bring your attention is Flutter Casual Games Toolkit, introduced with a new SDK version. Probably, to build the tension a little bit, Google announced Flutter Puzzle Hack at the beginning of 2022, which challenged developers to build a 2024-like game in Flutter. Casual Games Toolkit.
- Last but not least, thanks to the collaboration with Microsoft, Flutter started to support foldable phones. Now developers can, by using additional information provided by MediaQuery, create widgets like TwoPane. They can take advantage of the extra screen and manage how widgets will lay out on an average single-screen phone.
- Ending the 3.0 features bullet list, Flutter started to support development on macOS and Linux, which follows Google’s goal — to create an SDK that allows for developing applications for almost all possible platforms from a single codebase.
What’s new in Flutter 3.3 — shortlist
1. Impeller graphics engine
First and foremost, Google has introduced a new Flutter rendering engine: Impeller, which certainly is the most important announcement from the performance point of view. Previously, Flutter used the Skia engine, which was improved to support new chipsets and hardware acceleration on both mobile platforms, Android and iOS. Overall it brings more predictable performance and is told to solve problems with shadering and performance during scrolling.
2. Wonderous app as Impeller showcase
To show Impeller’s potential Flutter team decided to collaborate with the gskinner development team. They created Wonderous App (iOS and Android), which presents the new Impeller engine possibilities. This app also highlights animations and possible transitions with the newly introduced graphics engine — by presenting eight world wonders. Users can see interesting transitions, unique scrolling patterns, and crafted UI.
Wonderous code is open-sourced, so you can find a complete application code on GitHub. When you download and compile it using Skia and later Impeller, you will see differences in how specific frames are rendered.
The earlier problem with rendering with Skia was that shaders (part of the code that sends instructions to GPU) had to be compiled before the app was run for the first time. Impeller solves this problem, and now when you run the same application but with a new rendering engine, new frames are rendered smoothly.
3. SelectionArea Widget
A new exciting SelectionArea widget was also announced. It brings developers a great possibility to select text from multiple separated widgets, which has not been possible until now. Imagine you want to build a banking transaction summary, but you build each detail separately, row by row in column. If each detail were a Text widget wrapped in a row and put in a column, the user could only copy and select one text at a time. Now all text widgets content can be selected and copied at once thanks to SelectionArea.
Simply wrap your column with SelectionArea, and all text elements below SelectionArea can be copied at once. (You pass only one child to SelectionArea, so all text widgets should be wrapped in a Column widget or any other single widget). It works on both: desktop and mobile and brings a great possibility to copy text from multiple separately built widgets at once quickly.
4. Material Design 3
Flutter 3.3 also brings interesting news in terms of Material 3 (also called Material You) implementation. What is Material 3, you may ask? It is a design language by Google, mainly oriented to Android. It’s a well-described design standard that presents not only design elements and organisms but also rules for accessibility, animations, and more: on both mobile and web.
You can download, compile and run this demo app and see what the new Material 3 implementation in Flutter looks like, or you can test it on this web app demo. Right now, if you run the Flutter app, you will see the Material 2 design — if you want to see Material 3, you need to manually opt-in.
Actually, Material 3 is still in the phase of being brought to Flutter, which you can see in this GitHub issue. To be specific, this release brings updates on IconButton, Chip and AppBar.
5. Trackpad enhancement
The usage of laptop trackpads in Flutter web applications was improved within the Flutter 3.3 release. You might get a taste of it on the new Flutter Cookbook page. Now users can point to the widget.
At the bottom of the page, you can see a DartPad with an interactive example containing a list of dish widgets and a row of restaurant clients below. What you can do here is: scroll smoothly through the dish list, hover over a specific dish widget, and later drop it on a specific restaurant client widget. After that client is highlighted, and below the client’s name, we can see the number and sum of ordered dishes. Such behavior was not possible before because when dragging and dropping elements, hovering gestures might have been misled by scrolling gestures.
6. Scribble
It is also worth mentioning that Flutter now supports text Scribble input on iPad using an Apple pencil. Hand-written text input into a TextField is translated to letters in real-time. This is the default behavior in CupertinoTextField, TextField and EditableText.
7. VSCode extensions
Flutter 3.3 brings new VSCode plugin improvements, such as adding multiple dev dependencies. Just hit Cmd + Shift + P, type Add dependency, and pass comma-separated package names.
Side note:
Another update that we would like to list here wasn’t made by Google but can be very useful to all Flutter devs and Testers. Not long since Flutter 3.3. LeanCode open-sourced Patrol — a new Flutter-first UI testing framework. Every member of the Flutter community is welcome to use it, report bugs, raise ideas and feature requests to help us make it an even better solution.
Summary
We went through the most useful and promising Flutter 3.3 features and tools from a performance, design, and multiplatform point of view. Flutter Framework is developing fast and brings developers tools to build better-performing apps and interact with them using multiple inputs (improved trackpad and newly apple pencil).
Also, it aims to speed up development and facilitate app testing. Some time ago, Flutter used to be the mobile-first framework. Still, it is currently being adapted quickly to other platforms, and we are given a more stable framework on web, desktop and iPadOS. Those are the most significant changes, but we also encourage you to check release notes — to find information about subsequent bug-fix releases.
We are excited about what Flutter’s future releases might bring us!
Meanwhile, you can also catch up on the recent iOS and Android updates. We summed up breaking changes and new features of both platforms.
