Publish from the same code base to the web and mobile devices

Original address: medium.com/flutter/flu…

Http://medium.com/mariam.has…

Published: March 4, 2020 -10 minutes to read

Our vision for Flutter is to be a portable UI framework for building beautiful app experiences on any platform. Today, as part of Flutter 2, we announce that The network support for Flutter has reached a milestone of stability.

The first Version of Flutter supports iOS and Android and has been used to bring more than 150,000 apps to the mobile app store. Now, adding Web support means those same applications can reach a wider audience, while opening up new ways to build interactive experiences on the Web.

In this initial release of network support, we will focus on three application scenarios.

  • Progressive Web applications (PWA) combine the reach of the web with the capabilities of desktop applications.
  • Single-page applications (SPAs) that load once and transfer data to and from Internet services.
  • Extend the existing Flutter mobile app to the web to implement shared code for both experiences.

This article describes what we have built so far and explores examples of how you can take advantage of Flutter’s network support in your own applications.

IRobot Education developed the iRobot Coding app using Flutter to provide code learning experiences on the web.

Our online journey

Today’s Web platform is richer than ever, with hardware-accelerated 2D and 3D graphics, offline and installation support, and access to underlying operating systems and hardware. The web has allowed a wide range of frameworks to be built on top of this underlying platform, giving developers great flexibility in how they create applications for the web.

Since Flutter is written in Dart, a language that provides JavaScript compilation, the natural next step was to explore the web as a target. That’s our vision, to provide a portable framework for building beautiful UIs wherever you want to draw pixels.

Our approach is to build a consistent toolkit that works on all platforms (rather than having two separate frameworks with subtly different behaviors) to ensure that your own code runs without surprises.

At the architectural level, Flutter is a multi-tier system, whose.

  • A framework that provides abstractions for common idioms such as widgets, animations, and gestures.
  • An engine that renders to the target device using its exposed system API.

The framework itself is written in Dart, and approximately 700,000 lines of Flutter framework core code are the same across all platforms: mobile, desktop, and now the Web. The same is true for your code; We use the Dart development compiler (DartDevc) or Dart deployment compiler (Dart2JS) to compile your code into JavaScript, which can then be hosted on the server.

With Dart’s ability to compile the Flutter framework (and your application code) into JavaScript, our work supporting the web involves replacing the low-level C++ rendering engine used by mobile apps with code mapped to the web platform API. Flutter doesn’t just port its widgets onto HTML equivalents. Instead, Flutter’s web engine offers a choice of two renderers: an HTML renderer optimized for size and wide compatibility, and a CanvasKit renderer that uses WebAssembly and WebGL to render Skia canvas commands onto a browser canvas.

Our goal with Flutter is to provide a new approach to the web platform, building on existing foundations and providing new insights to improve the web for everyone.

Provide production quality stable version

Since we released the beta version of WebSupport a year ago, we have learned a lot about how early adopters are using it, and we have worked with a number of customers who have now shipped their Flutter Web application into production.

During this time, we made significant architectural improvements and added features to extend and optimize Flutter’s Web capabilities, focusing on four areas: performance, Web-specific features, desktop form factors, and plug-ins.

performance

Our biggest area of improvement since earlier releases is performance. During development, we gained a better understanding of the performance and correctness characteristics of various rendering techniques on the web.

We started with an HTML-based, DOM-based model. In this mode, the Web engine of Flutter translates each generated Flutter scene into HTML, CSS, or Canvas, and renders a frame onto the page as a tree of HTML elements. Although HTML renderers offer maximum compatibility with a wide variety of browsers and have a small code size, the HTML renderer’s redraw performance is not well suited for graphics-intensive applications such as Rive, a collaboration tool built with Flutter for creating motion graphics.

Rive, a tool for creating custom animations, recreated their application on the web using Flutter and is now available in beta.

To effectively handle the fidelity required to render intensive graphics, we started experimenting with CanvasKit, which can render Skia’s paint commands in a browser using WebAssembly and WebGL. We found that CanvasKit can deliver superior performance, fidelity and correctness, enabling the level of graphical horsepower shown in this demo by Felix Blaschke, a talented member of the Flutter community.

Flutter Plasma, a demo created by Felix Blaschke, runs on Safari, Firefox, Edge, and Chrome.

Each renderer has its advantages in different scenarios, so Flutter supports both rendering modes.

  • HTML renderer. Use a combination of HTML elements, CSS, Canvas elements, and SVG elements. This renderer has a smaller number of downloads.
  • CanvasKit renderer. This renderer is exactly the same as the Flutter mobile and desktop, with faster performance and higher widget density, but with an increased download size of about 2MB.

To optimize your Flutter network application for each device, the render mode is set to automatic by default. This means that your application uses an HTML renderer on a mobile browser and CanvasKit on a desktop browser. You can also use –web-renderer HTML or –web-renderer canvaskit to explicitly select the renderer to use for your application. For more information, see Web Renderer.

Web-specific functionality

A Flutter application running in a browser should feel like a web application. So we added some features to Flutter to help you use the best of the web.

The Internet has many advantages, not least its global reach. One of the many reasons to bring your existing Flutter application to the web is to reach users outside the App Store. To do this, we have added support for custom URL policies to ensure that your users can reach your application anywhere simply by clicking on a URL. With this capability, you can control the urls displayed in the address bar and the routing of your application across the network.

The Flutter Plasma Demo showroom page is an example of the URl_strategy plugin, a custom URL strategy based on Flutter, in action.

Hyperlinks are also crucial to how users navigate the web. A new link widget in the URl_Launcher package allows users to deeply link to anchors within your app or to external websites. You can use links on related widgets, including buttons, inline text, images, and specify whether links are opened in the same TAB or in a new TAB.

Another integral part of any application is text rendering. Developing a layout system for text is one of the biggest challenges of supporting Flutter on the web. Because the Web lacks a direct text layout API, Flutter must make various measurements of the Paragraph by triggering layout(). These measurements can become quite expensive, so a new canvas based text measurement adds support for both plain and rich text. Flutter can now make detailed measurements efficiently on the web, enabling features such as accurately drawing highlight boxes on selected text.

Interacting with text is just as important as being able to render text quickly and accurately. You can now select, copy, and paste text by using the SelectableText and EditableText widgets. In addition, form text fields support auto-fill, enabling the browser to store data and handle future auto-fill situations.

Flutter 2 is particularly suited for implementing progressive Web applications, or PWA. PWA is well suited to the efforts of Chrome’s Project Fugu to bridge the gap between mobile and Web applications in a secure and trusted way.

Invoice Ninja launched the PWA app using the same code base as their existing Flutter mobile app.

When you create Flutter network application, we include a PWA network manifest file and code to set up a service worker. Manifest files provide metadata, including information, about how your application should behave.

When you create the Flutter Web application, we include the PWA Web manifest file, along with the code to set up the service worker. Manifest files provide metadata about how your application should behave, including information such as ICONS and application titles. Service workers can cache resources and run your applications offline. When you run Flutter as a PWA in your browser, you will see the opportunity to install Flutter on your device, either as a mobile application or a desktop application.

Support desktop form factor

We want to make the Flutter web experience feel right, regardless of the shape and size of your browser window. On mobile browsers, the Flutter application already has excellent support for gesture and scroll physics inherited from mobile application support. But desktop browsers offer different UI tolerances, so we updated Flutter accordingly.

For example, one would expect the contents of a desktop to display a scroll bar that can be controlled by a mouse or keyboard. As a result, the new customizable interactive scrollbar supports themes, tracks, and the ability to scroll by dragging your thumb. PrimaryScrollController has been extended so that you can use keyboard shortcuts to scroll without wiring your own scroll view.

Zurich Insurance’s Property management solution, built by Spica Technologies, is a good example of how Flutter’s Web support can enable business applications on a desktop browser.

We also increased the default content density because the mouse pointer supports a tighter density than touch devices. And we added a superset of system mouse Pointers to the framework to support all platforms.

Finally, to support all users, Flutter’s web semantic capabilities have been extended to support Windows, macOS, and ChromeOS accessibility. On the network, the second DOM tree, called the SemanticsNode tree, is generated in parallel with the RenderObject DOM tree. The SemanticsNode tree converts flags, actions, tags, and other semantic properties to ARIA properties. You can now navigate the Flutter web application using the Anna, VoiceOver, TalkBack or ChromeVox screen reader.

Plug-in ecosystem

Finally, networking support has been added to some of the most commonly used plug-ins, making it possible to bring your existing Flutter applications to the web. The Flutter plug-in allows your code to interact with the local libraries of the platform you are running on. When you run your Flutter application on the web, you can access existing JavaScript libraries through plug-ins.

Since the beta release, support for the following plug-ins has been added with the help of the community.

  • image_picker
  • google_maps
  • Firebase_analytics
  • firebase_storage
  • connectivity
  • cloud_firestore
  • cloud_functions
  • cross_file

Looking forward to

A few years ago, it was not possible to provide Flutter at an acceptable level of quality and performance over the network. However, the introduction of new network technologies and the continuous improvement of platforms allow us to leverage the potential of more infrastructure. With web support, Flutter covers every device on the Internet and provides a consistent experience across all modern browsers and devices.

Much of this release was determined by feedback shared by early Web users and questions submitted by the community. For this, we thank you for looking to the future. Our primary goal is to quickly process your feedback and resolve issues so that you can focus on delivering high-quality Flutter applications on all target platforms.

Moi Mobiili, a modern mobile virtual network operator, recently launched its web application using Flutter.

Performance may always be an area of investment. Our goal is to reduce code size and increase frames per second (FPS). Today, every Flutter web application downloads the engine code it needs. We are investigating the possibility of caching part of the logic to reduce startup time and download size. We recently worked on reducing code size using deferred libraries in the Flutter Gallery demo app and plan to share what we’ve learned soon.

We continue to refine a number of areas in the coming months.

  • While CanvasKit is stable, there are some edge cases that are not covered, such as font fallback for special characters or proper support for cross-source resource sharing (CORS) images.
  • PWA currently caches a subset of resources, so our full offline support still requires additional manual steps to work with CanvasKit.
  • Text rendering and features, such as selecting heavily styled text, are still one of the most complex features we will continue to work on.
  • Our plugin ecosystem is also something we will continue to invest in so that there is greater equality between the packages that Google releases on mobile and the web.

  • Simplebet uses Flutter’s network support to build a highly interactive, embeddable NFL and NBA betting experience within Fanduel’s existing suite of mobile apps.

Start using Flutter on the web

With the portability of Dart, the power of the Web platform, and the flexibility of the Flutter framework, you can now build applications for iOS, Android, and browsers from the same code base.

For those who already have an existing Flutter Web application, you can now build your application in a stable channel. If you’re new to building Flutter Web applications, check out Flutter. Dev /web, our introduction to Codelab, and Flutter Engage Web group meetings. Also, when you’re building your Web application, be sure to submit any questions to GitHub.

We can’t wait to see what you build with Flutter’s new Web support!

Translation via www.DeepL.com/Translator (free version)