Flutter (38): single child scroll view
38.1 IntroductionThe SingleChildScrollView is similar to the ScrollView in Android; it can only accept a single child widget. Its definition is as follows:SingleChildScrollView({this.scrollDirection=A···
Flutter (37): Introduction to scrollable components
37.1 Sliver Layout ModelIn Section 4.2, we introduced that Flutter has two layout models:The box model layout based on RenderBox.The list layout based on Sliver (RenderSliver), which supports lazy loa···
Flutter (36): Scaffold
The Material component library offers a variety of rich components. This section introduces the most commonly used Scaffold component. For the others, readers can refer to the documentation or explore···
Flutter (35): Space adaptation (FittedBox)
35.1 FittedBoxWhen a child component's size exceeds that of its parent component, Flutter will display an overflow warning and print an error log to the console unless handled properly. For exampl···
Flutter (34): Clip
34.1 Clipping WidgetsFlutter provides several clipping widgets to clip components:Clipping WidgetDefault BehaviorClipOvalClips a square child into a circle or a rectangular child into an ellipse.ClipR···
Flutter (33): Container
33.1 ContainerWe have used the Container component multiple times in previous examples. In this section, we will take a closer look at the Container component. The Container is a composite container c···
Flutter (32): Transform
TransformTransform can apply matrix transformations to its child component when rendering, allowing for various visual effects. Matrix4 is a 4D matrix through which we can perform different matrix ope···
Flutter (31): DecoratedBox
5.2.1 DecoratedBoxDecoratedBox allows you to draw some decorations (like background, border, gradients, etc.) either before (or after) its child component is rendered. The definition of DecoratedBox i···
Flutter (30): Padding
30.1 PaddingPadding allows adding spacing (or white space) to its child nodes, similar to the margin effect. We’ve already used it in many examples before, but now let’s take a closer look at its de···
Flutter (29): LayoutBuilder, AfterLayout
29.1 LayoutBuilderWith LayoutBuilder, we can access the constraints information passed by the parent component during the layout process, allowing us to dynamically construct different layouts based o···
Flutter (28): Alignment and relative positioning (Align)
In the previous section, we discussed how, through Stack and Positioned, we can specify one or more child elements' precise offsets relative to the edges of their parent element, allowing them to ···
Flutter (27): Stack, Positioned
Layered layout is similar to absolute positioning in the Web or Frame layout in Android, where child components can position themselves based on their distance from the four corners of the parent cont···
Flutter (26): Flow layout (Wrap, Flow)
When introducing Row and Column, if a child widget exceeds the screen bounds, an overflow error will occur, as shown below:Row( children: <Widget>[ Text("xxx" * 100), ],); The result i···
Flutter (25): Flexible layout (Flex)
A flexible layout allows child components to allocate the parent container's space according to certain proportions. The concept of flexible layout exists in other UI systems as well, such as the ···
Flutter (24): Linear Layout (Row and Column)
The so-called linear layout refers to arranging child components either horizontally or vertically. In Flutter, linear layouts are implemented using Row and Column, similar to the LinearLayout control···
Flutter (23): Layout principles and constraints
Size-limiting containers are used to restrict the size of a container. Flutter provides several such containers, including ConstrainedBox, SizedBox, UnconstrainedBox, AspectRatio, etc. This section wi···