This article summarizes and classifies the 29 layout controls of Flutter, explains some layout optimization strategies, and how to select the controls for a specific layout.

1. Series of articles

  1. Detailed description of Flutter layout
  2. The layout of Flutter (I) – Container
  3. Flutter layout (2) – Padding, Align, Center
  4. The layout of Flutter (3) – FittedBox, AspectRatio, ConstrainedBox
  5. Overview of the Flutter layout – Baseline, FractionallySizedBox, IntrinsicHeight, IntrinsicWidth
  6. Description of Flutter layout (5) – LimitedBox, Offstage, OverflowBox, SizedBox
  7. Flutter layout (6) – SizedOverflowBox, Transform, CustomSingleChildLayout
  8. Layout of Flutter (7) – Row, Column
  9. Flutter layout (8) – Stack, IndexedStack, GridView
  10. The layout of Flutter (9) – Flow, Table, Wrap
  11. The layout of Flutter – ListBody, ListView and CustomMultiChildLayout are explained

1.1 the disorderly kan

I also wrote some articles about Flutter in a very slow way, and they were very sketchy. A recent job transfer and internal change of department have disrupted the original sharing plan.

It has been almost four months since I first came into contact with Flutter. During this time, The Release Preview version of Flutter was also released. Each technology website in line with the mentality of the first set, promoted a few waves, domestic popularity followed also rose a lot. Domestic practitioners account for a large proportion of Flutter developers around the world. This phenomenon in itself does not mean much, but it may reflect a commercial appeal. Of course, the majority of the wait-and-see, in addition to some individual developers love to toss, that is, some large business mature to no longer mature team, internal digestion personnel to toss this.

As an aside, I feel the recent job changes, and I have a lot of crazy thoughts at this time. What does a technology mean to a programmer? If you no longer have to work for a living, are you still interested in the technology you already have? If your current project requires technology that is not personally beneficial to you, but only wastes your time and pushes you further down the technology stack, would you still be involved? Only a handful of people will change meets the fate of life project, no matter what project, involved in the foundation of technical personnel has always been technology (except for executives or going to a newline), technology selection, removing the follow-up time efficiency considering factors such as generality, top of the list should always be on the improvement of itself, and pulled some away.

1.2 nature

I counted the layout controls summarized in my article, and there were 29 of them. At first glance it looks like a lot of real chicken hair, not at first glance, will also feel a lot of chicken hair. Why don’t other mobile platforms have so many layout controls? In fact, other platforms don’t have that kind of segmentation.

Take the Android platform as an example. The most basic layouts are LinearLayout, RelativeLayout, ConstraintLayout, and so on. Many of the Flutter controls are simply a matter of setting properties for Android.

Look up, iOS, Android, Web these platforms layout, in fact, the most basic there are several, linear layout, absolute layout, relative layout and so on. Flutter doesn’t get away from this either, so why does Flutter now have so many layout controls?

  • First, as I mentioned earlier, the idea of Flutter is that everything is a widget. This has to do with how Flutter is implemented, not because of its layout, which is the most important point.

  • Second, I think this is because this is the early stage of Flutter. If you have experienced a complete development cycle of technology, you will understand that in the early stage, all kinds of parts are provided, and only when there is enough commercial support or human support will the parts be optimized. This is a state of underresourcing. There are a lot of different components that can be combined, but the underlying implementation mechanism doesn’t change, just add another layer, and this is where the wheels can be built, such as encapsulating a set of controls libraries for Android, iOS, or Web people, etc.

  • Third point, related to the initial stage, a set of new technology, all kinds of things can not be all of a sudden to understand, the road is always walking to find that go awry, like some controls, some places may be appropriate, but some new places are not quite appropriate, so another, so some controls look very similar functions.

Having said all this, I just want to point out that Flutter is still at the initial stage of social development, where the problem of food and clothing cannot be solved. There is still a long way to go before Flutter can achieve a well-off society.

2. Single-node control

Single-node control, as the name implies, is a layout control with only one node. This kind of control how many, I have summed up before the article has 18 kinds, at this stage or do not exclude the possibility of increasing, ha ha.

2.1 classification

In this section, I try to categorize these controls from a number of dimensions, which I hope will help you understand.

2.1.1 Division based on inheritance

The parent level inheritance of the 18 controls is shown above. The only control that differs is Container. So according to whether the inherited from SingleChildRenderObjectWidget classification is as follows:

  • A control that inherits from a StatelessWidget and has a Container.
  • Inherited from SingleChildRenderObjectWidget controls, Padding, Align, Center, FittedBox, AspectRatio, ConstrainedBox, Baseline, FractionallySizedBox, IntrinsicHeight, IntrinsicWidth, LimitedBox, Offstage, OverflowBox, SizedBox, SizedOverflowBox, Transform, CustomSingleChildLayout.

Container is a composite control, not a base control, as you can see from the inheritance relationship.

2.1.2 Divide according to whether the function is single

The categories are as follows:

  • Container, Transform, FittedBox, SizedOverflowBox.
  • Single-function controls, There are Padding, Align, Center, AspectRatio, ConstrainedBox, Baseline, FractionallySizedBox, IntrinsicHeight, IntrinsicWidth, LimitedBox , Offstage, OverflowBox, SizedBox, CustomSingleChildLayout.

Container is special. You can see what makes it special. There are two aspects to this.

  • Container is special to a Flutter because it is not a single-purpose control but a composite control, so it is special to Flutter.
  • It’s not special for mobile developers, as many uIs are a combination of basic features that make it easier for developers to use.

So what’s the conclusion? Personally, I think that Container will become more and more containerized. There will also be individual developers who will develop this kind of general purpose Container. This is a general trend and a small step towards making Flutter easy to use.

2.1.3 Classification by Function

Here I try to divide the function according to the three parts of positioning, size and drawing. Of course, this division is not absolute.

  • Location controls: Container, Align, Center, FittedBox, Baseline, Transform.
  • Size control: Container, FittedBox, AspectRatio, ConstrainedBox, FractionallySizedBox, IntrinsicHeight, IntrinsicWidth, LimitedBox, SizedBox, S IzedOverflowBox.
  • Draw controls: Container, Padding, Offstage, OverflowBox, SizedOverflowBox, Transform.

One control that does not fall into any of these three categories is CustomSingleChildLayout. Baseline can be put into the drawing, here I adjust the position of the text to do classification, this is known, not to say that can only be divided this way.

For drawing controls, there is a bit of a mess, I put all the display-related things in here, such as whether to show, inside margins, whether to go beyond the display, deformation and so on.

For each of these categories, Flutter provides multiple controls. This division shows that there are many overlapping functions of a Flutter. Many times a property of a Flutter is divided into a control.

2.2 the use of

There are so many single-node controls, but most will not be tried individually. For most people, is the usage of the Buddha, a control can be used, has been used to death.

In the layout, the general direction or kept demolition, a design diagram, demolition into a tree, each node according to the need, choose the right control, and then start from the root nesting, the layout is completed.

2.3 Control selection

Control of a wide variety of real use of the time how to choose? There’s a way to do everything in containers, which is what most people do when they’re new to something. This does achieve the layout as planned, but there are some performance issues involved.

Control selection, in accordance with the minimum control function criteria to select. For example, you can use Container or Center to Center child nodes. But in terms of functionality, Center is minimal, so choosing it minimizes the extra overhead.

UI implementation, this is only the most basic, once this step is reached, should be more to think about how to better layout, to achieve higher performance.

3. Multi-node control

The type of multi-node control is less, although there are 11 kinds, but more functions and scenes, so the choice will be easier.

3.1 classification

The internal realization of multi-node control is more complex than the single node control, which will be classified from the inheritance and function of the two directions.

3.1.1 Division based on inheritance

As you can see from the figure above, the multi-node layout control is basically divided into three lines

  • Inherit control from BoxScrollView, have GridView and ListView;
  • Inherited from MultiChildRenderObjectWidget controls, there is a Row, Column, Flow, Wrap, Stack, IndexedStack, ListBody, CustomMultiChildLayout eight;
  • RenderObjectWidget (RenderObjectWidget)

As mentioned earlier, the GridView and ListView implementations are very similar, basically silvers contain only one Sliver (GridView for SilverGrid, ListView for SliverList) CustomScrollView. That’s why both elements inherit from BoxScrollView.

Official MultiChildRenderObjectWidget class, read as follows

A superclass for RenderObjectWidgets that configure RenderObject subclasses that have a single list of children.

It is just a child node contains a single list of controls, why the Table don’t need to inherit from MultiChildRenderObjectWidget?

This is because the child nodes of the Table is 2 d (somehow), and is provided by MultiChildRenderObjectWidget a one-dimensional child node management, so must inherit from RenderObjectWidget. Knowing this, it helps to understand the inheritance relationship.

3.1.2 Division by function

This for the multi-node layout control, or more difficult to divide, the author tried to do the following division:

  • List: GridView, ListView;
  • Single Column single Row or multiple columns multiple rows: Row, Column, Flow, Wrap, ListBody, Table;
  • Display location: Stack, IndexedStack, CustomMultiChildLayout.

Personally feel this kind of classification way is not particularly safe, but still write down, ask everybody benevolence benevolence.

GridView and ListView are categorized because their implementation is very similar, and because the content area of both controls can be infinite, unlike other controls whose content area is fixed.

Row, Column, Table, and ListBody may observe this division. Flow and Wrap are approximately multi-column, multi-row. This division is absolutely not absolute, but a way of personal consideration division.

3.2 the use of

Multi – node control type is less, and the function overlap is very little, so in terms of use, or a few simpler. The GridView, ListView, Row, Column, Stack controls cover most of the layout.

3.3 Control selection

Multi-node controls overlap less, so the choice, there is not too much ambiguity, use what you need.

4. Performance optimization

There is no consensus on performance optimization, as Flutter is not yet perfect in any way. However, the big picture is still there, and using a smaller set of controls can help with rendering efficiency.

4.1 optimization

I’m trying to list a few here, not all of them correct.

  • For single node control, if a layout of multiple controls can be completed, the use of the smallest function, you can refer to the above control classification in the function division to make a choice;
  • For multi-node control, if the single node control to meet the requirements, then to use a single node control layout;
  • For listViews, the standard constructor works for a small number of items. If there are many items, use listView.Builder.
  • For gridViews, if you need to display large amounts of data, use gridView.Builder.
  • Flow, Wrap, Row and Column are the four controls. In terms of efficiency, Flow is the most efficient, but the most complex to use.
  • Row and Column are more efficient than tables if they are single rows or columns.
  • Stack and CustomMultiChildLayout can be more efficient in some cases if both meet the requirements, but depending on the Delegate implementation, CustomMultiChildLayout can be more complex to use.

The above list is rather miscellaneous, but it can be summed up as follows:

  • The less functions of the control, the higher efficiency;
  • The ListView and GridView Builder constructor are more efficient.
  • The implementation of more complex controls, the efficiency of the general will be higher.

4.2 choose

Control of the choice, the individual feel to grasp the general direction is enough. If time is urgent, to achieve the efficiency of the first priority, if time is sufficient, you can according to some optimization rules, to make some choices. Pure control level, bring performance improvement is very limited after all.

5. Actual combat

First of all, let’s have a look at the actual effect drawing. This is a relatively complicated interface in the previous project. Even if it is put into native, it is still quite complicated.

This page has a number of custom controls, such as date selection, progress, and so on. The whole thing looks complicated, but the implementation is actually ok. On how to layout disassembly, before the article has been introduced, here no longer elaborate, the trick is a word —- disassembly.

5.1 About Custom Controls

Custom controls are generally inherited from StatelessWidgets and StatefulWidgets. Some special ones, such as the progress control above, are drawn directly on Canvas.

For those that need to update their status, they are inherited from the StatefulWidget. For those that do not need to update their status, use the StatelessWidget. Use the StatelessWidget whenever possible. There will be additional overhead.

Flutter’s custom controls may be simpler to write than its native counterparts. They are more a combination of basic controls and involve less underlying rewriting.

5.2 About the Life Cycle

This is a sore one. A pure Flutter App is similar to the single Activity App in Android. Even if a specific page listens to the life cycle of the native layer, it can only get the base activity, but not the page level.

5.3 feeling

Flutter can be very attractive if it has enough wheels, and can be written very quickly after familiarizing itself with the basic components. The implementation of custom controls is also relatively simple. However, in terms of performance, there is still a relatively big problem, complex pages are still slow to load for the first time. For high-end models, the overall smoothness is very good, comparable to the original APP, while for low-end models, the performance is more anxious. On the whole, the Flutter works well. Give it a try and have fun with it. It’s just gross to write, gross to write, gross to look at all these nested tags and feel like they’ve been de-dimensionalized into Web development.

I have recently seen some automatic layout solutions based on Flutter. I have also thought that there are tools for creating layouts based on Flutter. Just drag and drop can achieve a very complete layout page. Also thanks to the idea and implementation mechanism of Flutter itself, there are many things on the Web that I think can be borrowed from Flutter. Flutter does have its own unique features at the UI level. Flutter would have been more acceptable if it had been a cross-platform UI from the start.

A few days ago I saw the official camera plug-in, which is still quite painful. For the Domestic Android end, it is almost impossible to take it directly for commercial use. The plug-in is implemented based on Camera2, but most domestic manufacturers have poor support for CamerA2, and some crash that is easy to reproduce has not been solved.

If you decide to use the Flutter in an existing project, you need to be prepared to build a wheel. If there is a shortage of manpower, you should not invest in this. When there is more manpower, you can invest in follow-up research to make the industry think you are great and cutting-edge.

6. The latter

The author has set up a project about Flutter learning. The Github address contains some articles about Flutter learning written by the author. They will be updated regularly and some learning demos will also be uploaded.

Reference 7.

  1. Detailed description of Flutter layout