Flutter 2 is Here: What You Should Be Excited About

Build cross-platform applications for Desktop, Mobile and Web

Dulanka Karunasena
Bits and Pieces

--

Since its initial release in 2017, Flutter gained massive popularity in the Mobile Development world. Flutter has proven its dominance with over 150,000 apps in Play Store alone. Personally, Flutter has never let me down as a Mobile Developer! But, what is so cool about Flutter 2?

With Google’s Flutter 2, developers can now target six different platforms: Android, iOS, Windows, macOS, Linux, and Web.

All you need is a single Dart codebase! Flutter 2 has made cross-platform app development much more straightforward. With this feature, Flutter can now be considered as a portable framework than a mobile framework. Let’s do a deep dive into more of the exciting features of Flutter 2.

Flutter for Web

Initially, Flutter for web came as a beta release. But Flutter 2 has arrived with stable web support, and you can use it to develop production-ready web apps. Web support has given app developers the ability to reach a larger audience using the same codebase.

At present, Flutter’s web support focuses mainly on Progressive Web Apps (PWAs), Single Page Apps (SPAs), and bringing existing mobile apps to the web. Flutter is well known for its high performance as a mobile framework due to its powerful state management. The same is achieved in the web by Flutter, as a result of the two rendering techniques used,

Check out the Flutter Plasma demo to get an idea about the performance of a Flutter web app.

Flutter Folio demo web app built with Flutter

There is no magic behind developing a web app with Flutter. You should use the so-called Widgets to design your layout, and Dart will be the underlying language.

When building for the web, the Dart code will be compiled to JavaScript.

Flutter 2 has introduced several web-specific features to get the best out of the web platform. Such as,

  • Link Widget to embed links to external URLs or routes within the app.
  • Canvas-based text measurement to support text formatting.
  • SelectableText and EditableText widgets to select, copy and paste the text.
  • Developing PWAs.

To initiate your first Flutter web project: Install Flutter 2, create a project, and execute flutter run -d chrome inside your project directory to run it.

Chrome is the default choice to debug web apps built with Flutter.

Flutter Demo App running in Chrome

Flutter for Desktop

The next best thing about Flutter 2 is the early release of Desktop application development. This allows developers to ship their products to Windows, macOS, and Linux with ease.

Flutter Folio desktop app for Windows

To provide a smoother experience in desktop, Flutter has embedded the following features, which are native to desktop platforms.

  • Right-click menus.
  • Text selection pivot points.
  • Dragging with pointing devices.
  • Scrollbar, which supports desktop.
  • Command-line argument handling.

When developing for desktop using Flutter, you should be on the targeted platform. For example, you cannot build a Linux application in a Windows environment.

Flutter SDK is now available as a snap, in Linux Snap Store. The publisher of Ubuntu: Canonical, has chosen Flutter as the default framework for their future desktop and mobile apps.

Developing a desktop app with Flutter is pretty simple! Use the following command to enable desktop support by Flutter. Replace <platform> with your target OS: Windows, macOS, or Linux.

flutter config --enable-<platform>-desktop

Use the command flutter run -d <platform> to start debugging the application.

Flutter Demo App running in Windows

According to Flutter Docs, desktop support included in Flutter 2 is a snapshot of its beta release. The Flutter team will be launching a stable release of desktop support this year.

Note: Flutter does not encourage the distribution of desktop applications until the desktop support hits stable.

Sound Null Safety in Dart

Flutter 2 comes with a much-needed change to the type system in Dart, which is non-nullable types or null safety. This means that variables cannot ever be null unless it is explicitly said.

Null safety enables developers to write safer code with fast execution. As a result, there will be fewer bugs and app crashes.

Dart’s null safety is considered sound, which means that it ensures all libraries are null-safe and gives errors if any null-unsafe type exists. Null safety can be a bit trickier to understand. Let’s test this out in DartPad.

Null safety example with integer data type

You can explicitly indicate that a variable is nullable by inserting a question mark (?) to the end of the type name.

Declaring a nullable variable using '?'

About 25% of the packages available in Flutter’s package manager are now enabled with sound null safety.

Google Mobile Ads SDK

Google Mobile Ads integration is now available as a beta version with Flutter 2. If you are a Flutter developer, you might be familiar with the firebase_admob package, which was the most commonly used plugin to integrate Google Ads. firebase_admob is currently deprecated, and it is recommended to use google_mobile_ads instead.

This new plugin can be considered one of the best approaches to monetize your Flutter app, no matter what capacity you have as a developer. Google Mobile Ads comes with AdMob support, useful for medium-sized and Ad Manager support for large-scale publishers.

Ad formats provided by AdMob

Google Mobile Ads plugin supports a wide range of ad formats,

  • Overlay banner — Banner ads that are fixed and float on top of the app.
  • Inline banner — Banner ads that appear inline with app content. These ads can be embedded into an app’s flow.
  • Interstitial — Ads that take a full screen to display.
  • Rewarded video — Rewards users with in-app items for watching short videos.
  • Native ads — Highly customizable ads which appear in line with app content.

In addition to the above features,

  • Flutter 2 comes with a tool called Flutter Fix which can be used to avoid breaking already written code. This tool is really helpful in identifying deprecated APIs and available replacements. Flutter Fix has also been included with Flutter and Dart extensions in popular IDEs like IntelliJ, Android Studio, and VS Code.
  • Additionally, Flutter 2 comes with improvements to its developer tools or Flutter DevTools to make debugging of Flutter apps much easier.
  • Flutter has also introduced several plugin updates for Firebase Services such as Cloud Firestore, Authentication, and Crashlytics, etc.
Source: https://developers.googleblog.com/2021/03/announcing-flutter-2.html

Final Words

Over the past few years, Flutter gained massive popularity and a positive reputation among the developer community. As a result, Flutter has been able to increase its community support and arrive at healthy partnerships with big companies. There are key industrial usages such as,

  • Flutter has partnered with Microsoft to bring foldable support, useful for devices like a surface duo.
  • The publisher of Ubuntu: Canonical uses Flutter as the default choice for their mobile and desktop apps.
  • Flutter’s abilities do not stop here! World’s best-selling automaker, Toyota, is planning to use Flutter to power their infotainment systems which bring the abilities of Flutter to the whole new dimension of embedded systems.

These advancements prove that Flutter is a framework with huge potential when compared to others. Therefore, I encourage you to go ahead and try it out in your future projects.

What are your thoughts? 🧐 Let everyone know in response.

Build anything from independent components

Say goodbye to monolithic applications and leave behind you the tears of their development.

The future is components; modular software that is faster, more scalable, and simpler to build together. OSS Tools like Bit offer a great developer experience for building independent components and composing applications. Many teams start by building their Design Systems or Micro Frontends, through shared components. Give it a try →

An independently source-controlled and shared “card” component. On the right => its dependency graph, auto-generated by Bit.

--

--