Flutter for Web – reach users on new platforms with almost no changes in code

March 3rd, 2021 was an important date in the history of Flutter – version 2.0 was announced during Flutter Engage, the biggest Flutter conference of 2021. As Flutter lovers we couldn’t wait to see it in action and we are confident it will not disappoint. Flutter 2.0 is definitely a major breakthrough giving this framework much broader possibilities. In this article, we would like to concentrate on milestones achieved by Flutter with this release announcement – Flutter for web and Flutter for Desktop is no longer in the beta stage anymore!
flutter for web

| Flutter 2.0 – what’s new?

With version 2.0, Flutter is not just a mobile platform anymore! It’s a portable framework, with the possibility to run on a wide variety of platforms, with little to no changes in code. With Flutter 2.0, developers can now concentrate on what they want to create, instead of solving platform-related problems.

Flutter 2.0 concentrates around four, major elements:

  • Performance
  • Web-specific features
  • Support for desktop form factors
  • Plugin ecosystem

Together with Flutter 2.0 and Dart (the programming language behind Flutter) was updated, giving developers even more possibilities to create outstanding and high-performance applications.

| Flutter for Web – what is it?

The ability to run Flutter based apps inside almost any web browser reached a production-ready status. It will be possible to run any Flutter-based app in a web browser with the look and feel of using the web application. This will also include easy access by simply typing the URL on any device with access to a browser!

Flutter for Web supports PWA out of the box, which means users are able to install it on their device (as a mobile or desktop app) with information including icons and app title.

What’s more? Flutter added web support for some of the most popular plugins, giving developers the ability to use them in the browser and interact with libraries native to the specific platform.

| Flutter for Web – what does it actually mean for developers and end-users?

Flutter 2.0 brings performance and stability improvements to all the existing platforms – mobile (Android, iOS), web (any web browser) desktop (macOS, Windows, Linux) and embedded systems. With Flutter 2.0 it is possible to build apps with a single codebase for the six biggest platforms!

As said by Tim Sneath, the Director of Product Management for Flutter & Dart in Google:

“Flutter is the first UI platform, designed (…) for building beautiful, native and fast experiences, wherever you might want to paint pixels on the screen”

Support for as many platforms as possible is crucial for every application from a business perspective – with Flutter for Web, you are able to reach many more users than ever before – all 6 platforms together have more than a billion users! This gives a totally new perspective and adds easy scalability to your business. Consider that your competitors may still not provide support for new platforms, which means that you can impress their user base that may be looking for a similar solution on a different platform.

With web support, Flutter also gives additional business value – you don’t need to hire a specific development team for a specific platform. One team can easily help you to develop an app for six major platforms. Or you can easily reuse code from your existing mobile app to give the same experience on the web without hiring another team of developers. It’s a huge time and cost savings when investing in development. There’s more, Flutter supports platform checks – you can render different screens on mobile and web to find all the bugs during development. This will help you to reduce costs later, during the QA phase.

Moreover – it’s exactly the same Flutter used for mobile devices – it’s not a fork or a different edition, giving the user the experience specific to each platform without losing performance. This is because, with Flutter 2.0, the creators introduced optimized architecture to keep Flutter apps for the web as fast as possible and to render the graphics in the browser faster than ever. Developers can choose one of two rendering engines – HTML or updated CanvasKit. Flutter has a great ability to render any graphical objects – effects, transitions or animations, giving the developers and designers the ability to recreate almost anything they have in mind.

| What you can make with Flutter for Web?

Before, Flutter was known as a highly performant tool mainly for mobile apps. Although Flutter for Web might not be the best idea for developing static websites, there are several instances where concentration on the concept of app-centric development is highly applicable. Still, you can develop web apps for any browser with the same codebase that was used for the mobile edition, but also the initial release of Flutter for Web allows you to develop:

  • Progressive web apps (PWAs) combine the web’s reach with the capabilities of a desktop app.
  • Single page apps (SPAs) that load once and transmit data to and from internet services.
  • Expanding existing Flutter mobile apps to the web, enabling shared code for both experiences.

| Flutter for desktop

During the event, Google also introduced that Flutter support for the desktop is also in the early stage of a stable release. Considering the way of using browser apps and desktop apps are similar, the proposed solutions are similar as well.

Both of them have built-in and web/desktop-specific features and widgets. This will help developers use the real power of the big screens and adapt the user experience to the browser and desktop. What is also important is the support for the way people physically use computers and laptops – in most cases, a touch screen is not the way people send information to the computer, – that’s why Google toolkit supports the keyboard functions (yes, Flutter supports keyboard shortcuts) and mouse or touchpad (scrollbars!).

Both Flutter for Web and Desktop are included with installation (you are able to create platform-specific executable files) and access offline support. You can download your app and thanks to access to the memory of the device, you can use it later without a connection to the internet.

Using Flutter apps on desktop computers means also using them on screens that are larger than mobile screens. That’s why Flutter 2.0 is adding increased content density and support for screen readers.

| Flutter for web and desktop – what’s next?

Flutter 1.x gained huge popularity – more than 150,000 apps were created using this framework. We are sure that Flutter 2.0 will open a new market for this tool in the coming years. It will only gain more popularity as more and more apps are developed using Flutter.

The community of Dart & Flutter developers is steadily growing. Google is promising that community feedback is highly important and will influence the development of Flutter in the future. All the signs show that the popularity of Flutter will constantly grow in the upcoming years and Google will put even more efforts into its development.

Tim Sneath says that the company will have a few goals in mind. The first of them is to constantly optimize the performance of the apps, with reduced code size and increased supported frames per second. These efforts should result in reduced startup time and smaller download size. The second goal is concentrated around rendering – Flutter will support more edge cases like rendering fancy style fonts and offline support for apps will be extended.

We are very excited about the future of this framework and we can’t wait to develop amazing Flutter for web and desktop applications!