Flutter 2 for Web: What's New?

Flutter 2 for Web: What’s New?


Yuriy Luchaninov - Javascript Group Leader at MobiDev
Yuriy Luchaninov,
JavaScript Group Leader

Summary:

The stable release of Flutter for Web, which happened on the 3 of March, will seriously impact the industry, the possibilities, and peculiarities of app development.

Let’s unveil the mystery with Flutter 2, find out how it will change the alignment of forces in the market, understand what’s new in Flutter 2.0, and how it can benefit businesses. We have prepared valuable insights. So, buckle up – we’re taking off!

Since the first release of Flutter in 2017, this framework gained leading positions among cross-platform mobile development technologies. We did explore Flutter for Web as it was in early beta. And yes – we are excited to research what the technology can offer after its improvement.

Flutter 2.0 release was preceded by patient and tenacious work. According to Flutter’s blog on Medium, the new version’s revision included addressing more than 24.5 thousand issues compared with version 1.0. The strong community joined forces to develop an upgraded framework. As a result, Flutter 2 is appropriate for developing fast, portable, and mesmerizing applications. 

The updated Flutter 2 is suitable for all platforms. Developers use one codebase to adjust apps to any operating system – from Android, iOS, and Windows to macOS or Linux (part of them are in beta-versions). Flutter is even suitable for smart TV and home appliances. MobiDev has already built Flutter-based smart TV applications. 

But what if we try to look deeper? Considering the event that happened on the 3 of March more thoroughly, we find out that the most significant change is the release of Flutter for Web. A stable version replaced the beta version, which opens up extensive prospects for web apps development.  

What’s New in Flutter 2, and Which Features are Notable? 

1. Flutter’s web support

The emphasis has been placed on rendering fidelity. A renderer based on CanvasKit became a fine addition to HTML renderer. Rendering models are being adapted to apps. 

In other terms, your app runs with the HTML renderer on a mobile browser, while CanvasKit is being used for desktop browsers. This approach has ensured better performance. 

2. Sound null safety

It’s an addition to the programming language Dart. In the case of updating to Flutter 2.0 and migration from the old version, you can choose what is non-nullable. 

3. The new version of Flutter for Desktop

This improvement is based on multiple upgrades. Editing of the text works as the native experience on all the platforms. There is no delay in the mouse input case when it’s needed to drag something with the help of the pointing device. But these are just some of the changes. Lots of other innovations are related to scrollbars.    

4. The adaptability of apps to any platforms

Adaptability is the main feature of Flutter 2. A multi-platform app named Flutter Folio demonstrates how it works. Folio looks attractive on screens of different sizes, and that is what developers wanted to achieve.     

5. Google Mobile Ads for Flutter

The beta version of Google Mobile Ads for Flutter was already presented. This plugin foresees support for AdMob and AdManager. The previous testing shows an increased level of efficiency and possibilities for monetization of applications.

6. Expansion and improvement of iOS features

New iOS widgets related to Cupertino were added. They simplify the creation of validated form fields. 

7. Autocomplete and ScaffoldMessenger 

These features are related to auto-complete functionality and SnackBar-related issues.

8. Add-to-app

This feature allows reusing code on iOS and Android while maintaining the existing native codebase.

9. Flutter Fix

Flutter Fix serves to improve the framework by a large community of developers without any changes in Flutter’s API.

10. Flutter DevTools

Updated tools simplify the process of debugging.  

What's New in Flutter 2

You have already known about Flutter’s features, and tech specialists will tell you about the importance of the latest version for cross-platform app development.

Experts’ Opinions: Flutter for Web 

From my perspective, the most significant step forward is the release of Flutter’s web support, but not for the reasons that immediately come to mind. I mean reusing the vast majority of the mobile application source code for a web app, thereby ensuring a significant reduction in the development budget. But the fact that Flutter, unlike other web technologies, can work not only through the DOM but also through its own render engine (Canvas kit), greatly simplifies the creation of unusual and non-standard web applications with non-standard UI UX. The development of such apps previously required significant time spent by the developer.

In addition, a huge number of ready-to-use widgets with customization options will greatly simplify the development of huge web applications for the enterprise, their creation, and testing for different browsers. I’ll remind you that previously, unusual highly specialized user interface components were obstacles for the development. 

All of this mentioned above leads to the fact that Flutter makes it possible to cover new web applications. Previously, these areas were difficult due to high costs. In other terms, even a simple Flutter development for the Web without other platforms makes sense in some cases. 

This version’s release simplifies the creation of applications for desktop systems with a rich UI. Previously, ElectronJS was mainly used for this, but the alternative is always good, as it moves progress along and allows you to choose the technology more optimally.

Also, do not forget about Dart’s improvements, designed to reduce the number of bugs and increase software development productivity.

The release of Flutter 2.0 is a kind of signal for clients and developers. This signal shows that Flutter isn’t an internal Google toolkit or alternative to React Native for app development, but a full-fledged portable framework that has a vast library of ready-to-use elements for both mobile and Web. This allows you to focus on developing the user interface rather than supporting a specific platform.

Google continues to improve Flutter in “width” and in “depth” by adding new widgets and improving support for existing solutions.

Flutter 2 also adds support for foldable (dual screen) devices, although in experimental mode. Perhaps, soon these changes will be available in the stable version of Flutter. We can confidently say that Flutter is suitable for the increased number of innovative devices on the market.

Also, Google pays attention to Dart’s additional tools that help to develop applications using Flutter. The new version of Dart adds support for null security to help developers create flawless applications and improve the user experience. Control over the development and enhancement of the programming language allows Google to improve Flutter and add new features to the toolbox.

Crucial to the new release is the stable version of Flutter for Web. This is a big enough event – it makes Flutter the only cross-platform technology known to me (not HTML-based) that officially supports the Web out of the box and does not differ from development for other platforms. Flutter has a huge library of UI components (Widgets) out of the box. We can use it to create any custom UI components that look the same on all platforms. So, it will quickly and efficiently solve business problems for mobile applications, for the Web, and in the future Desktop platform.

The exciting feature demonstrated during the Flutter 2.0 presentation was the announcement that Toyota uses Flutter to build infotainment systems for their cars. In my opinion, this is a clear indicator that more and more companies trust Flutter as a tool that solves their business goals quickly and efficiently. At the same time, companies such as 

Toyota approaches the choice of technology very carefully, weighing the pros and cons, because, with their scale, the risks are much higher.

Flutter-Powered Web and Mobile Cross-Platform Applications 

There are thousands of available applications based on Flutter, and some of them are Google products: G-Pay, Google Ads, STADIA, Google Analytics, Nest Hub, etc.  

Last applications based on Flutter 2 are iRobot and Rive. 

Thanks to the new release of Flutter, iRobot can move its educational environment to the Web. This will make their products available to Chromebooks or different devices where browsers are preferable.       

Rive serves for building animations. It is suitable for designers. The release of the web version of Rive built with Flutter was already announced.        

A notable example that paints exciting prospects for Flutter 2.0 is connected to the activity of Microsoft. Nowadays, Microsoft is expanding the support of Flutter. It means Windows support in the framework and improvements of the Flutter engine suitable for foldable smartphones and other Android devices.                                     

Flutter is a part of MobiDev’s core technology expertise. We build cross-platform applications from scratch and can help you to update an existing app to Flutter 2, even though this process does not cause any severe difficulties. So if you’d like to develop your following product with the technology – drop us a line to explore the options.

Contents

Flutter2 for Web: What's New

Want to get in touch?

contact us
Insights
How To Leverage New Web Development Technologies in 2021

TOP 10 Web Development Trends: How to Stay Ahead in 2021