This is the fourth day of my participation in the More text Challenge. For details, see more text Challenge

Note: This article is republished from the personal official account (the island tip)

The Flutter is Google’s mobile UI framework that allows you to quickly build high quality native user interfaces and applications from a single code base for mobile (iOS & Android), the Web, desktop, and embedded devices.

During the course of learning the Flutter, I also saw some people talking about the Flutter. Most of them sniffed that Flutter was unfriendly, that there were too many parentheses, and that the code looked very complex.

Of course, there are some people who think that moving away from structuring layouts in XML and using code logic to drive and build layouts is an acceptable approach for people who are aesthetically insensitive.

The so-called rivers and lakes, many schools, but also each flower into each eye. There is no certainty about who is right or wrong.

But my view is more neutral, should be half and half:

Building a layout in a code-driven way saves you the pain of scratching your head about the layout, but for more complex structures the code-driven form is less comfortable. Of course, in some features relative to the traditional is admittedly more convenient.

Since this period of time study, have seen the works of some great men, the skill is not general. Most of the works for independent realization, let me look at the brake envy.

However, to my shame, I have learned Flutter for more than a month, so MY overall understanding of Flutter is not very high, and I cannot fully explain the whole system of Flutter. However, what I can do is to rearrange and output the problems I encountered, the holes I stepped in and the problems I understood in the process of learning, so that young people who need or are interested in learning can provide help and reference.

Ok, so that’s my bullshit. Let’s take a look at the layout of the view of Flutter.

The layout of the view

A quick comment on my views on the layout of the Flutter view. In the previous post I mentioned that the Flutter was written in the Dart language, so the view editing was minimized. The rendering, structure, and layout of the view are generated by code logic.

The structure and logic to a certain extent in the view of relevance is strong, but in terms of visual layout structure is weak, so the result is in the code will find many deep nesting levels, will also have some request for the ability of developers, of course, if there is one of object-oriented programming experience, then to fit the problem is not big.

There are two main layouts in Flutter:

  • Multi-subclass element layout
  • Monad element layout

There is also a special LayoutBuilder that builds a Widget tree that can depend on the size of the parent window.

In addition, in the term description of the official document, the nested relationship between the two widgets is defined as a sub-widget under the Widget, which is not easy for some young people who have learned HTML or XML to understand, so it is agreed here:

Convention: In the following Articles in the Flutter View Layout series I will refer to the first level of widgets under widgets as "child elements" for young people to understand.

Multi-subclass element layout

That is, multiple child Widget elements are allowed under the Widget.

There are 10 widgets with multi-subclass element layouts:

  • Row rows the list of child Widget elements horizontally.
  • Column vertically lists the elements of the child Widget.
  • ListBody A Widget that arranges its child Widget elements in order along a given axis.
  • ListView Scrollable list control. The ListView, the most commonly used scrolling Widget, displays its child Widget elements one by one in the scrolling direction. On the vertical axis, the children are required to populate the ListView.
  • Table A Widget that uses a Table layout algorithm for its child Widget elements.
  • A Wrap can display its child Widget elements in multiple lines, horizontal or vertical.
  • Flow a Widget that implements a streaming layout algorithm.
  • A Stack allows its child Widget elements to be simply stacked together.
  • The IndexedStack displays the Stack of a single child Widget element from a list of child Widget elements.
  • CustomMultiChildLayout is a Widget that uses a delegate to size and position multiple child Widget elements.

Each Widget implements a different layout, with a major implementation scenario and the presentation of the sub-widget elements.

Monad element layout

That is, only one child Widget element is allowed under the Widget.

There are 18 widgets for the layout of monadic elements:

  • Container is a Widget for drawing, positioning, and resizing.
  • Padding Allows the child Widget elements to be added to the Widget that fills the specified space.
  • Center centers its child Widget elements to display widgets inside itself.
  • Align a Widget that aligns its child Widget elements and automatically resizes them based on the size of the child Widget elements.
  • Baseline A Widget that locates the locations of child Widget elements based on their baselines.
  • IntrinsicWidth A Widget that adjusts the width of its child Widget elements to their actual width.
  • IntrinsicHeight A Widget that adjusts the height of its child Widget elements to its actual height.
  • AspectRatio a Widget that attempts to specify the size of the child Widget elements to a particular AspectRatio.
  • Transform a Widget that applies the Transform effect before drawing the child Widget elements.
  • Offstage A layout Widget that controls the display and hiding of the elements of its child widgets.
  • ConstrainedBox A Widget that imposes additional constraints on its child Widget elements.
  • FittedBox adjusts the size and location of its Widget elements to its own size.
  • LimitedBox A box that is limited in size only if it is not constrained.
  • OverflowBox is a Widget that imposes different constraints on its child Widget elements, which may allow the child Widget elements to overflow the parent level.
  • SizedBox A box of a specific size. This Widget forces its child widgets to have a specific width and height. If the width or height is NULL, the Widget will resize itself to match the size of the child widgets in that dimension.
  • SizedOverflowBox A Widget of a specific size, but passing its original constraints to its child widgets, which may overflow.
  • FractionallySizedBox A Widget that places its child Widget elements in a small part of the available space. More details about the layout algorithm, see RenderFractionallySizedOverflowBox.
  • CustomSingleChildLayout A custom layout Widget with a single child element.

Each Widget affects the final view display of its child elements, such as size, position, border, background, and so on.

Article layout points

Since there are 28 + 1 different kinds of Widget layouts, it’s impossible to list them all in a single article, so I’m going to break them down into several articles.

I probably won’t go into too much detail on this part of the Widget for the layout of monad elements, since the part will only be used in specific requirements scenarios.

After organizing, I considered breaking it down into the following sections:

Multi-subclass element layout

  • Row, Column (1)
  • ListBody, ListView (2)
  • Table, Wrap, Flow (3)
  • Stack, IndexedStack (4)

Monad element layout

  • Container, Padding, Center, Align, Baseline (1)
  • IntrinsicWidth, IntrinsicHeight, AspectRatio
  • Transform, Offstage (3)
  • ConstrainedBox, FittedBox, LimitedBox, OverflowBox
  • SizedBox, SizedOverflowBox, FractionallySizedBox

Since CustomMultiChildLayout and CustomSingleChildLayout are similar, I put them together with LayoutBuilder.

I also thought about syncing the MyApp project of the Flutter series to Github for more intuitive learning and reference. I will also sync the code of the articles to Github whenever there are future updates. Let the partners in need to clone down to study

Of course, I try to write enough detailed comments in the code, but also hope that young people don’t have to guess the code, it doesn’t make sense, but to understand what is going on, and then try to modify the code to run the results.

Github

Github: github.com/linxsbox/my…