Google has launched version 2.0 of Flutter – an open-source UI development kit that enables app builders to craft cross-platform applications. The upgrade highlights a whole new pack of features and enhanced portability of Flutter to support apps on diverse platforms.
Today, we will explore what Flutter 2 has to offer. Read the blog to the end.
Flutter 2: A Complete Overview
Flutter’s high-end web support is the most crucial declaration in the launching event of Flutter 2 at Flutter Engage. Earlier, the foundation of the web was mainly document-centric. Now, rich platform-APIs facilitate sophisticated application development using paint APIs, hardware-accelerated 2D and 3D graphics and flexible layout.
Flutter 2 offers stable web support that renders the same experience on the web as one could get on mobile. The experts of mobile app development services can build apps for Android, iOS and the browser by using the same codebase. It’s possible to compile existing Flutter codes written in Dart into an excellent web experience because, with Flutter 2, the web is just another device target for your app.
The new release focuses on 3 app scenarios:
- Single Page App (SPA)
- Progressive Web App (PWA)
- Bringing existing Flutter-based mobile apps to the web and offering the same experience
Flutter does not transpile to the HTML equivalents of its widgets. Rather, Flutter’s web engine provides a choice between two renderers:
- A CanvasKit renderer that utilizes WebGL and WebAssembly to render the Skia paint commands to the browser canvas
- An HTML renderer that is optimized for broad compatibility and size
A demo of Flutter Plasma is also built to showcase the ease of creating a sophisticated web graphics experience with Dart that can seamlessly run on mobile and desktop.
The community has also added some web-specific features like text autofill, PWA manifests, and control over routing & address bar URLs.
It is still in a beta state, the stable version may release later this year. Nevertheless, let’s take a look at what it has to offer.
For desktop browsers, the community has added keyboard shortcuts, interactive scrollbars, screen reader support for easy accessibility on Chrome OS, Windows & macOS, and enhanced the default content density in desktop mode.
Google has made several enhancements – bringing Flutter desktop to great quality, ensuring that text editing offers a native experience on each supported platform, integrating foundational features such as text selection pivot points, etc. It has also added an inbuilt context menu to the TextField and TextFormField widgets for Cupertino and Material design languages. Grab handles are added to the ReorderableListView widget.
The updated scrollbar widget provides various engaging features that you may use on the desktop. Flutter 2 also allows command-line argument management for Flutter apps. That way, things like double-clicking on a data file in the Windows File Explorer can be used for opening a file in the app.
Flutter Fix is a collection of various things. It has an exclusive command line of Dart CLI tool known as Dart Fix. It helps to seek the list of deprecated APIs and upgrade code with these. It also allows access to the list of accessible fixes that is packed with Flutter SDK.
Further, it has an updated set of Flutter extensions for Android Studio IDE, VScode and IntelliJ that can present a similar list of accessible solutions and help the developers to change codes simply using mouse.
Google highlights 3 recent team-ups that present Flutter’s maximized portability.
Firstly, Microsoft will extend its support for Flutter. Alongside the recent collaboration for offering premium quality Windows support in Flutter, Microsoft will also contribute to the Flutter engine that facilitates app development for foldable Android devices.
Secondly, Canonical is clubbing up with Google for bringing Flutter to the desktop. It will support app development and deployment on Linux. Canonical promises to offer a superb experience on several hardware configurations.
Lastly, Toyota – a leading vehicle manufacturer – declared adopting some pathbreaking strategies for offering a next-gen digital experience to cars by creating various infotainment systems enabled by Flutter. Toyota sought to hire Flutter developer due to Flutter’s smartphone-tier touch system, quick iteration, developer ergonomics, and consistent high performance. Flutter’s embedded APIs will allow Toyota to customize Flutter and meet the requirements of building cutting-edge infotainment systems.
Flutter 2 aims at reducing the workload of the developers at any app development agency all the while ensuring high-quality results. Add-to-App is yet another feature to highlight that aim.
The developers can add Flutter to an existing Android or iOS app. The Add-to-App feature is a great way of reusing the Flutter code across both platforms all the while storing the current native database. With this change, Google suggests possible integration of the Flutter engine in native apps.
As we already discussed, Flutter now supports 3 platforms – Android, iOS and web and 3 more in beta – Windows, Linux, and macOS. How is it possible to create an app that changes to several forms (small, large and medium screens), several idioms (web, mobile and desktop), and several input modes (keyboard, mouse and touch)?
Flutter Folio gives an answer to this question.
Flutter Folio is a scrapbooking app designed to feature Flutter’s capabilities to create applications that seamlessly run on every platform and device: Android, iOS, Mac, Windows, Linux, and the Web. It is a perfect example of an adaptive app, built in collaboration with the gskinner and the Flutter team.
Flutter DevTools is used for debugging the Flutter apps. A new feature is introduced that focuses on any issue even before launching the DevTools is the ability for IntelliJ, Android Studio, or Visual Studio Code to notice whenever there is an exception and offer to present it in DevTools so as to initiate the debugging process.
While running the DevTools, new error badges on the tabs help to track down various issues in the app.
In DevTools, another new function has been added that allows seeing a picture easily at a higher resolution than it is featured. It helps to reduce extra memory use and the app size. The developers can allow the Invert Oversized Images in the Flutter Inspector to turn on this feature.
Google has also added the capability to display fixed layouts. This allows the developers to debug different types of layouts.
Other features available in Flutter DevTools 2 include the following:
- The Performance view is now renamed to CPU Profiler. Similarly, The Timeline view is renamed to Performance. The changes highlight the functionalities they offer.
- New memory view charts are smaller, easier to use and quicker. It incorporates a new hovercard that explains activities at a specific time.
- Search and filtering functionality are added to the Logging tab.
- Average FS data and various usability enhancements are included in the Flutter Frames Chart.
- The timing grid is included in the CPU Profiler flame charts.
- Tracklogs form is started so the developers can check the total logging history when they start it up.
- Unsuccessful network requests will be called out in the network profiler for instant fixation.
Google Mobile Ads for Flutter
Google announces the beta launch of Google Mobile Ads for Flutter. The new SDK works well with AdMob and AdManager for offering different ad formats, incorporating banner, native, interstitial, and rewarded video ads.
Google has also declared various updates to the Flutter plug-ins for key Firebase services like Cloud Messaging, Cloud Firestore, Cloud Function, Authentication, Cloud Storage, Crashlytics, integrating assistance for sound null safety as well as an update of the Cloud Messaging Package.
This is yet another significant revelation of Google. Dart 2.12 supports sound null safety. It has the potential to remove any null reference exception. That way, it ensures at development and runtime that types can just contain null values should a developer selects expressly.
The update also includes a consistent application of FFI (Foreign Function Interface). It enables the developers to use dart:ffi library in order to call native C APIs.
Time to Wrap Up
As you can see, Flutter 2 is bringing some ground-breaking changes in the realm of app development. The line between using a web and a mobile app is gradually fading in favour of offering a superb user experience of diverse platforms and devices. Should you seek to go with the flow, it’s time to build an app with Flutter 2!