Thank you again for your attention and participation in Flutter Engage China! We received a lot of feedback and questions from developers before and after the event. The Flutter team and speakers also responded to some of these questions in the live Q&A session. We’ve compiled some of the developer’s questions and responses to help you. Due to the large number of questions, we have two issues to release, the content of the previous issue has been released, welcome to review. You can also watch the Video on Flutter Engage China to review highlights:

➡️ Click here for a live retrospective video ⬅️

  • Bilibili video collection of links to www.bilibili.com/medialist/p…

Why does the Flutter SDK integrate so little content that even a simple control needs to be written by a third party plugin? Why can’t the control function be extended more?

Answer by Chris Yang, Engineer, Google Flutter team

When deciding what to integrate into the SDK from the start, we looked at three main factors:

  • Reduce the binary file size.
  • Hopefully the API in the framework will be more uniform across platforms. So if we add some control functionality to the framework or engine, we will not be able to unify the API.
  • Make the Flutter framework very modular, with many modules, many layers in between, so that we can easily replace them. If we build the video player controls into the Flutter engine and framework, it is difficult to avoid the situation that most Flutter applications have to choose from the video player API we provide. This can be quite inconvenient, especially for applications with different requirements. If you offer video players in the form of plugins now, everyone can find a solution. Different teams can also build their own plug-ins, which will definitely give everyone more options.

How does the Flutter package shrink?

Answer by Tao Dong, head of User experience research for Google Flutter

We’ve been working on optimizations for this. There are two main aspects of package streamlining. The first is the global optimization that the Flutter team has done for all users worldwide. The second aspect is the optimization that each App team does within its own App.

On the first front, we made a lot of improvements to the big build process last year, mostly on iOS. The size of the iOS end product has been significantly reduced. Currently, to further reduce the size of the package, developers need to make more trade-offs according to the actual situation of the App and customize the Flutter engine.

We also recently launched a tool in Dart DevTools called Code Size Analysis, which can help you visualize what is in the package and how much space each content takes up. Sometimes you may find that some resources or dependent libraries take up too much space. This tool will also help you to analyze the specific products of the Flutter engine, which is a good reference if you plan to customize the Flutter engine.

Answer by Huihui Yuan, technical director of Bytedance Flutter

I’ll add a few things briefly from the perspective of the App team. There are three optimizations the App team can make to reduce pack size. One is compression, mainly on the code side and the data side, we can do some compression of the data. The second is tailoring. You can look at which modules are not used. For example, if you are a domestic App, you do not need some international functional modules, you can cut them. The third is system-level optimization, such as large compilation from O3 to Oz, simplification of the head of the instruction set, removal of code source map and confusion, and restoration through the background platform after online, there are actually many means available.

Next, we will increase the external technical output, and we will sort out these skills and share them with you.

How to solve the performance problems caused by mixing large amounts of audio, video, text and pictures like weibo?

Answer by: Liu Sensen, Alibaba UC client team

This problem can be understood as a performance problem when the list is rolled inertia in such a complex card scenario. This problem is very typical, and there are actually a lot of optimizations that can be done at the application layer.

First, we can use the performance analysis tools provided by Flutter to locate problems and find out if there are some aspects of Flutter writing that can be optimized. For example, do widgets get built too many times, or are built too deep, causing the UI thread to stall while the list is scrolling? We can also use the RepaintBoundary provided by Flutter to reduce the scope of redrawing. And check whether ClipPath or BackdropFilter, which may affect Raster threads, is used and whether it can be avoided as far as possible.

After optimizing the writing, you can evaluate the implementation of FlutterView rendering using the SurfaceView. In principle, SurfaceView performs better than TextureView because it has a separate rendering pipeline. In actual tests, SurfaceView’s frame rate has improved by an average of 2 to 4 frames. The problem may be in mixed development scenarios, as it is not compatible with AndroidView, resulting in black screens and other compatibility issues. My advice is to develop a complete Flutter App using SurfaceView first; If you are doing mixed stack development, you need to evaluate whether the SurfaceView has any scenarios that cause compatibility problems, and then use the SurfaceView as much as possible.

If the first two steps don’t show any problems, you can use the frame-by-frame rendering idea I shared and also reduce the UI and Raster thread drawing time.

  • Tencent Video Link
  • Bilibili video link

Back to the engine level, some optimization made by UC will also be fed back to the community in the form of PR, so you can pay attention to our progress.

Is Flutter suitable for educational and training applications?

Answer by Huihui Yuan, technical director of Bytedance Flutter

In terms of education, what we actually use Flutter more often inside bytes is our educational product. I have learned that many companies will separate an educational product according to the curriculum, such as mathematics, English and thinking, into separate apps, which requires a lot of work. When entering a new industry, the recruitment of employees may fall behind. At this time, we really care about whether a technology can achieve rapid improvement in r&d efficiency. At this time, Flutter is a good choice.

Yesterday I talked about Flutter with the education company outside our company. They now have a large App and want to split it into many education sub-apps, which may be divided into 3, 5 or even 10, but their team may only have a few developers on Android and iOS. It turns out that Flutter is a great way to get in. I think Flutter is a good choice not only for the education industry, but also for some new apps if you are interested in r&d efficiency.

How does the high latency rendering pipeline split frames? Is it using Isolate to split threads?

Answer by: Liu Sensen, Alibaba UC client team

The high latency rendering pipeline, which actually outputs frames in 16ms cycles, a Vsync cycle, has not changed. The main implementation is to increase the tasks that must be completed in one Vsync cycle to two Vsync cycles. Since the UI thread and the Raster thread are parallel, the throughput of the output is increased. The Raster thread always outputs one frame per Vsync cycle. You can combine Android DoubleBuffer to understand, it will be easier. In terms of threads, instead of creating new ones, we operate on the original UI thread and Raster thread. These changes are only in the engine layer, the upper layer doesn’t have to do anything.

What does Flutter do on car systems? Will Toyota open source its vehicle system with the Flutter in time?

Answer by Zoey fan, Product Manager, Google Flutter

Last time at the Flutter Engage event, we asked Toyota to talk about some of their current Flutter deployment plans. Toyota has yet to announce exactly what it plans to do, or whether it will open source. If there is a need, we will have a chat with Toyota and make suggestions. But we’re not Toyota to make that decision on their behalf, and if they have any future open source plans, we’ll share them.

.

That’s part 2 of the FAQ for Flutter Engage China developers. Feel free to review the previous part of Flutter Engage. If you have any questions or suggestions, please share your feedback and thoughts in the comments section or GitHub.