Author: Alibaba Tao Department of technology – zhengwu

FlutterEngage was held online in the early hours of March 4. The whole event was rich and exciting. Here, our technical experts will take you to review the annual feast of Flutter technology.

Flutter2.0

The most exciting part of the event was the release of Flutter2.0. So what are the main new features that Flutter2.0 brings?

In summary, the biggest change in Flutter2.0 is that desktop and Web support has been officially announced in the stable channel, in addition to mobile device support already in the stable channel.

Dart2.12

Unique set of application building capabilities

portability

Dart’s efficient compiler generates machine code for x86&ARM, as well as Web-optimized JS. It supports a wide range of targets: mobile devices, desktop PCS, back-end applications, and more.

High development efficiency

Dart’s HotReload feature enables a fast, interactive development experience for both native devices and Web applications. Dart also provides a wealth of objects for application development, including the Isolate model, async/await concurrent processing, and event-driven development patterns.

robust

Dart’s robust air safety type system, which can catch errors at compile time, is highly scalable and reliable, and is used to support a wide range of applications, such as highly important Google Ads and Google Assistant, running for more than a decade

Sound air safety

Robust air safety is a major improvement in the Dart language since the introduction of the robust type system in Dart2.0. Null security further enhances the type system, allowing developers to catch null errors, which are a common cause of application crashes. By introducing null safety, developers can catch null errors during development and avoid online crashes.

Here are the principles for sound space safety: Default non-space: Radical changes to the type system

By default, non-Nullable increments are used for migration to nullable security

Null security results in a significant reduction in machine code for the following code:

class Animal {
 int age = 0;
}
int getAge(Animal a) {
 return a.age; 
}
Copy the code

Continuous improvement of existing functions

The GooglePay package size is reduced by 14% by optimizing the size of the Flutter. UTF8Decoder can accelerate up to 20x for different inputs

FFI for integrating Dart and C

Dart FFI allows you to leverage existing C library code, which not only improves portability, but also allows you to take advantage of highly tuned C code in performance-sensitive scenarios. In Dart2.12, FFI is out of beta and is considered stable and available online. The following features are added.

• Pass the structure by value
• Structure nesting
• Automatically generate FFI bindings

Next step in the Dart language

Type alias three-phase shift operator Generic meta information annotation static meta programming

Web

FlutterWeb officially entered stable channel. With the release of this initial stable, the existing Flutter code Web platform support will enter a new phase. In other words, when you create apps using Flutter2.0, the Web is just a new device target.

Leveraging the capabilities of the Web platform, Flutter builds the foundation for rich interactive Web applications. Flutter For Web(FFW) focuses on high performance and high fidelity rendering performance. In addition to the HTML rendering back end, FFW also added a CanvasKit rendering back end. And a host of Web-specific features, such as Link Widgets, that make your application feel like a Web application when it runs in the browser.

In this phase, FFW focuses on the following application scenarios:

Progressive Web Apps(PWA) Single Page Apps(SPA) extends existing Flutter mobile Apps to the Web side

Architecture design

The entire framework is written using Dart and totals about 70W lines of core Flutter framework code that is consistent across all platforms, whether mobile, Desktop or now the Web. You can either compile the code into javascript using DartDevc or Dart2JS and run it on the server.

Given that Dart itself can compile the entire Flutter framework into JS, the core issue of getting Flutter to run on the Web is to replace the underlying C++ rendering engine for mobile applications with the corresponding Web platform API. Flutter does not simply compile widgets into their corresponding HTML elements. Instead, its Web engine offers two options for rendering backends, with HTML backends used to reduce package sizes and provide wide compatibility.

The CanvasKit backend uses WebAssembly and WebGL to render Skia drawing instructions on the browser Canvas, with higher performance and component density, but increased download package size by approximately 2M. You can specify the render backend by using the following command.

–web-renderer html –web-render canvaskit

Stable Web support

Showcase

Rive

Rive, a tool For creating custom animations, uses Flutter For Web to refactor its code and is available in beta.

Flutter Plasma

Flutter Plasma shows a Flutter Demo that runs on Safari, Firefox, Edge, and Chrome.

iRobot

IRobot Education developed the iRobot Coding App using Flutter to provide a code learning experience anywhere for anyone by making it available on the Web.

Mobi

Moi Mobiili, a modern mobile virtual network operator, recently launched their Web application using Flutter.

Web related features

User-defined URL policies

The new Link Widget

Canvas based text measurement and rendering

Text interaction (select, copy, paste, etc.)

Desktop form factors are supported

Looking forward to

• Further support for CanvasKit, such as CORS images

• Full offline support for PWA

• Text rendering and functionality

• Improvements to the plug-in ecosystem

Desktop support

Flutter Desktop is also officially in stable channel, which is the initial release state.

Canonical is working with Flutter to bring Flutter to the desktop, and engineers are developing the code and deploying it to Linux. It is essential to provide a stable, reliable and elegant experience across a wide range of hardware configurations. Looking further ahead, Flutter will be the default choice for subsequent Canonical desktop and mobile app development.

• Text editing experience
• Mouse input experience
• Scrollbar
• IME support
• Support for additional desktop features
• Updated documentation support for publishing apps to specific app stores

Folding device support

Microsoft continues to expand its support for Flutter. In addition to continuing to contribute high quality Windows support in the Flutter Engine, Microsoft is adding Engine support for new foldable Android devices. These devices introduce a new design model where apps can either extend their content or take advantage of multi-screen features to provide a side-by-side experience.

flutter.gskinner.com

In addition, Folio App, developed by Gskinner, is a good example of Flutter running on multiple platforms. With a set of code, Flutter handles touch, keyboard and mouse input on small, medium and large screens, and ADAPTS well to the characteristics of the platform (such as links on the Web and menus on the desktop).

Embedded Device support

Toyota has announced its plans to provide the best digital motor vehicle experience on the market by building an entertainment information system using Flutter. Using Flutter marks a completely different development experience from previous in-car software. Toyota used Flutter for the following reasons:

• High performance and AOT consistency

• Touch mechanisms on the smartphone layer

• ergonomics

• Iterate quickly from customer feedback

Tool chain

FlutterFix

There are now over 50 million Flutter developers, and we are faced with an increasing number of device platforms. As frameworks mature and grow larger, there is a growing need to avoid making changes to frameworks and breaking larger and larger codebase. However, in order to continuously improve Flutter, we also need to be able to make Breaking changes to the API. The question is, how can we continuously improve the FlutterAPI without interrupting the developer experience? We provide FlutterFix.

Flutter Fix contains the following properties:

Dart Fix — Dart Fix, a new command-line option, can be used to find out which apis have been deprecated and how to update them. Provides options for fixing IDE plug-in integration so that modifications can be made by choice

DevTools

• IDE plug-ins can help developers clean up problems even before DevTools is started.

You can quickly find the Widget that caused the problem by clicking a button. Currently only Layout Overflow exceptions are supported, but the DevTools team plans to cover all common types of exceptions.

• Easily find high resolution images and track down excessive package sizes with memory usage
• Inspector adds the ability to display fixed layouts
• Memory view is faster, smaller, and easy to use
• Log Tab Adds search and filtering functions
• Logs can be traced before DevTools starts

Community and ecological data

More than two years after Flutter1.0 was released, Flutter has closed a total of 24,541 issues and incorporated 17,039 PR entries from 765 contributors. There are currently over 50 million Flutter developers and over 15 million Flutter applications. There are currently 15K packages available for Flutter and Dart, which include Amazon, Microsoft, Adobe, Alibaba, eBay, Square, etc. Also report key packages such as Lottie, Sentry, SVG, and sign_IN_with_apple, Google_Fonts, Geolocator, and SQLite recommended by Flutter Favorite.

other

• Multiple engine instances in Add2App

In the past, additional Flutter engine creation caused the same memory overhead as the first Flutter instance. On Flutter2.0, we reduced this memory overhead to 180KB per instance, a 99% reduction. Therefore, we recommend using multiple Flutter engine instances in your native App.

• DartPad upgraded to support Flutter2.0

AskFlutter round table

Participants in the roundtable were: Andrew Brogdon(host), Eric Seidel(Director of Flutter), Ian Hickson(Director of Flutter Technology), Mariam Hasnany(FlutterForWeb PM), Frank Van Puffelen, Developer project Engineer.

Here are excerpts from some of the important questions:

Host: When will FlutterWeb be available for production?

M: The good news is that Flutter Web is officially available on stable channels today. You do not need to enable any flags to use the Web as the target device for the Flutter application. This means that for any developer who already has a Flutter Web App, you can now build your application using the Stable channel. If you are developing a new Flutter Web App, check it out quickly.

Host: What is the ideal user scenario for Flutter Web?

M: That’s a really good question. With this landmark release, we’ve focused on building the foundation for rich interactive Web applications. If you already have a Flutter mobile app, you can now use the same code to build a Web version of Flutter and then extend your user base to the entire Web app. Not only that, it’s an added advantage for building PWA or SPAde applications. These applications often use a lot of dynamic content, interactive UI, and we usually think of these three as the best fit. Of course, there is still a lot of work to be done to support document-centric pages. For example, traditional HTML pages have a lot of text, static content. So I think we’re really in a good position to develop Web applications.

Host: Currently there are over 8200 Open Issues on Github. Flutter seems to be understaffed. Are there any plans to improve this or what are your priorities?

I: Yes, we do. As Netlinx asked, we have over 8,000 Open Issues, but the important thing is that we are trying to address them. For example, last year we had over 15,000 Issues on Github, and we closed 15,000 Issues. We are happy with the percentage of fixes and fixes. This number is an indication of how many users we have. The more people use it, the more bugs are raised. The number of issues we solve is an indicator of how many contributors we have, and we have a lot of contributors. On Github’s Flutter Hacker group, we have over 200 people. More than half are Googlers; most contributors are not. In fact, some of the Flutter Team people are from open source projects, either From Microsoft or Canonical, or volunteers who use their own time. Different people put in different amounts of time, and they all contributed to the project, so hopefully we can solve more problems and make Netlinx happy.

Host: When does the Flutter Web discard the # in the URL?

M: That’s a good question. Let’s start with why it exists. Today we will sometimes use the Hash URL policy, which was decided when we started the Web engine. That is, when you have a Flutter named route, we are basically initializing the route as part of the hash and adding it to the URL. With the release of Stable today, we have a new way to customize urls and discard hashes from urls. This way you can build urls on your own terms, configure the rest of the suburls, implement deep links or share them with friends. There is also a plug-in in the community called URL Strategy that implements our guidelines in the documentation in a very simple way.

Host: The Flutter still has a lot of compatibility issues with Mac M1, are you working on that or do I need to buy an old Intel Mac?

E: I’d say you don’t need to buy a new computer. I suggest you try again today. There are many optimizations for M1 on Flutter2.0. In fact, we also became aware of the new information released by M1 at the same time as the community. That day we ordered an M1 development machine and started working on it. We split it into three buckets for running apps, toolchains, and development tools. As far as I know, the first two barrels are working fine. Of course with the official release of Flutter2.0, we’d like to hear from you if you’re having problems with M1 or anything else. As Ian said, we have a lot of Issues every day and we want to address them as quickly as possible. So, go ahead and try Flutter2.0. I think it should work fine, and it will continue to work fine as we make more code changes.

I: What’s interesting about M1 is that it’s almost a brand new platform because we’ve never used ARM as a host before. Today we’re launching the Web and Desktop, but, really, Apple Silicon is Apple’s own platform that we’re going to support. Although we now support the current release of macOS, there is still a lot of work to do.

Host: Does the Flutter Dart team plan to provide official guidance for App development? Android like Jetpack?

I: I’m going to laugh because you threw this question at me as if you didn’t know the answer. We have been discussing this for weeks now. Yes, we have. In fact, I think either today or soon we will post a new template to the Flutter Master branch that is basically the answer to this question. How to use best practices to create and apply, state recovery, and so on? Not just the answer to that question. The core of programming is that there are many variations on these issues, and different apps have different needs. We hope that this particular template can really help you, and we hope that there will be templates for different architectural types in the future. Perhaps you prefer Redux to the one we used in the template. This won’t be released today with Utter 2.0, but I think it will be released in stable in the next few months.

Host: Will air security destroy existing apps? Is there something that needs to be migrated?

E: The problem is that you can migrate. There’s even a tool to use. I think it’s called dart Fix and you can run it on your code base and it will help you change your code to Null Aware.

I: If you followed earlier Keynote, we have a chapter on how it works. This is not disruptive and you need to make sure that your dependencies have migrated smoothly first. If your dependencies are not migrated, it will be difficult for you to migrate your own code. This is possible, but it would be inefficient. So, as you know, if you have a package that hasn’t been migrated, ask the package developer to do it. Even without migration, it would not be particularly disruptive. As Keynote mentioned, that’s why we’re not calling this release Dart3. It is backward compatible. As with other languages, Dart security allows you to decide which version to use, Dart2.0 or higher. We went through this with the Flutter Sample repository and we looked at examples to see how much dependency there was. Sort them, and with Flutter2.0, we’re actually done with the Sample repository. Another benefit of the way we deployed null-security is that you can compile both null-security and non-null-security, and the compiler itself will use null-security optimizations. He can know the type when compiling null safe code. When a non-null secure code boundary is reached, null-detection logic is added. We call this unsound air safety. If I remember correctly, so that your code can run in mixed mode, it can.

Host: Is Flutter suitable for 3D rendering?

E: LET me answer. We build Flutter as a 2D system. A lot of people actually use it for 3D work. The API we provide can be used to draw 2D objects on a screen. To support 3D, people can create their own 2.5D or 3D objects and embed the Flutter with textures. A lot of people do that. In fact, I think the Wallace & Gromit app was mentioned in Keynote. It has 2D and 3D content in it. Mixing the two works, but again, the Flutter is designed for a 2D experience.

Host: How does Flutter support the desktop?

I: Yes, Flutter Desktop is now available in the Stable channel, although we don’t think it is fully stable anymore. We support macOS, Windows and Linux now. What else? We haven’t provided all the necessary features that you might need, for example, we don’t currently support multiple Windows, although this is under development. We still have a lot of work to do. Support for basic single-window apps is very stable. I wrote my own sudoku app and it works great on Mac.

E: Yes, I would like to say more, I love Flutter Desktop and he is already available on stable channel and his development experience is great. You just turn it on and the Flutter works by itself. It’s a great working experience. Give it a try and write us feedback. I want to say that for me, the public part of Flutter Web and Desktop is great.

Host: When will the problem of App animation lag be solved for the first time?

E: This is a common problem, especially in the last few weeks, I’ve been writing long posts on Reddit, and I’m working on a longer blog. What I want to say is that performance has always been a fundamental measure of Flutter. When we discussed this project five or six years ago, we said to talk about performance first. Performance is number one on our task list. It’s not just words, we guarantee that in all sorts of ways. All submissions first pass a variety of performance tests, covering all platforms. We’re always looking for performance optimization, every day. Especially when it comes to animation stuttering for the first time, which we’ve been aware of for some time, especially on iOS. The problem has worsened in some cases over the past year. When migrating from OpenGL to Metal, we can no longer cache Shaders, you have to use the GPU to generate these pixels. In any case, we are well aware of the problem and are working on it, with a lot of people involved. Ian is attacking these issues.

I: Yes, I have been paying attention to the issues of Caton, which are very much on my mind right now. You can check out Github Probject188, which IS a number I keep in mind because I turn it on a lot. There are all the relevant questions. The best thing you can do is, as we discussed earlier, if you run into app lag, mention a bug, bring a replay code, including a video showing the lag, and a trace on the timeline to explain exactly what your app is doing in the video. This is the most helpful for us at present, we can study specific cases, they are not all caused by the same reason. Even if it’s Shaders, it’s not necessarily the same Shaders. All these different bugs will be solved with different problems.

Host: How does Google plan to use Flutter Web internally?

E: I can’t, you know, talk about the plans of other teams, what I can say is that there are a lot of teams that are normally trying to use Flutter Web. Flutter Web just came to Stable today and we are giving similar guidance to our internal teams as well, you know, we are still working through the issues. So there is nothing to announce today, but I can expect more use of Flutter Web. I worked on this engineering technique and thought it was a better way to write code once and run it on all platforms. We have seen many Google teams adopt this strategy for Flutter, and I think Flutter will continue to come to more applications.

I: We have seen many internal tools using Flutter For Web. When they don’t have a big team behind them, they need tools that are useful and can be developed efficiently. For example, in the Flutter team, we use the Flutter Web to develop internal tools for migrating common Flutter code to internal repositories such as GooglePay and for use by other teams. These tools are written using Flutter.

Host: When does Dart support WebAssembly?

I: This means a lot, we actually use WebAssembly in Flutter For Web already. Mariam could probably talk more about that, but in a nutshell, we have two other parts related to WebAssembly and Dart. One is whether Dart is compiled directly into WebAssembly, and the other is whether you can take code that has been compiled into WebAssembly and link it to Dart. For the second question, connecting WebAssembly to Dart, I think there is a package that already does that. It’s not the most convenient way, but it’s possible. Compiling Dart into WebAssembly is currently not feasible. This requires WebAssembly to implement some immature features, WebAssembly GC, multithreading, etc. We are very interested in this, and I think WebAssembly has the potential to really become a unified interoperable language in the next few years.

M: Flutter Web currently has two rendering backends and we use HTML by default. The HTML+DOM+CSS back end renders the application this way, but we are also trying to use CanvasKit for rendering. Today we’ve settled down and you can use CanvasKit, which uses WebAssembly and WebGLS to render apps instead of Skia in the browser. We also have something called Auto for these two different render backends. He can choose renderers for different environments, using CanvasKit on the desktop and HTML on the mobile browser to take full advantage of both.

Host: How do you feel about Flutter Web compared to React and Angular?

E: The first thing that comes to mind with Flutter Web is that we only draw on Canvas. We think of it as GPU/CPU direct. I think this is very different from React and Angular.

I: I am always hesitant to compare Flutter with other technologies because each has a valid user scenario. I don’t want to talk about React. React is good here, bad there. It all depends on React, and we’re happy to be able to communicate these other technologies together, and we hope that the community as a whole can write a guide that says, you know what scenarios Flutter is good For, what scenarios Flutter For Web is good For, what scenarios React is good For and so on.

Host: Which channel do you think we should use?

I: The main difference of Stage is that stable is different from other channels. We will pick fix to stable channel. As a result, you can see that stable Channel changes very little with each update. This does not happen with the dev branch. We will not check the dev channel, if dev has a problem, it will be fixed on the trunk, and then we will generate dev again in the next few days. And that’s not going to happen on the main line because we’ve been working on the main line. There’s a risk here, the closer the code is, the easier it is to have the problem that we didn’t catch I. Of course, they’ll all be fixed eventually, and that’s a tradeoff.

conclusion

This is an exciting release. Now we can say that Flutter is truly app-centric and platform-wide. Be it mobile, desktop, or Web, Flutter is production-grade. In the face of increasingly fierce business competition, it can significantly reduce development costs and understaffing/imbalance problems, and provide a more stable and consistent user experience.

However, on the other hand, there is no solution to the Legacy System problems commonly faced by the domestic market from the official channels at present. Especially for desktop problems, application scenarios such as Windows XP and Win32, as well as the compatibility of FlutterWeb performance experience, the business side still needs some alternative solutions. Other issues, such as mobile device performance, package size, dynamics and browser compatibility, are no longer problems in principle, but need to be further optimized for performance, size and experience.

Conclusion Reference

What’s New in Flutter 2.0

Announcing the Dart 2.12

Flutter web support hits the stable milestone

Language design funnel

Flutter design doc

Flutter Engage Youtube

Flutter Folio

Announcing Flutter support for foldable devices