Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "how to use Flutter overlay component Stack". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Note: without special instructions, the Flutter version and Dart version are as follows:

Flutter version: 1.12.13+hotfix.5

Dart version: 2.7.0

Stack

The Stack component can overlay and display the sub-components, which can be superimposed up according to the success of the sub-components. The usage is as follows:

Stack (children: [Container (height: 200,200, width: 200, color: Colors.red,), Container (height: 170,170, width: 170, color: Colors.blue,), Container (height: 140,140,140, color: Colors.yellow,)],)

The effect is as follows:

The size of the unpositioned sub-components of Stack is determined by the fit parameter. The default value is StackFit.loose, which means the sub-components decide by themselves, and StackFit.expand means to be as large as possible. The usage is as follows:

Stack (fit: StackFit.expand,...)

The default upper-left corner of the unpositioned subcomponents of Stack is aligned, which is controlled by the alignment parameter. The usage is as follows:

Stack (alignment: Alignment.center,...)

The effect is as follows:

Have you noticed that both the fit and alignment parameters control unpositioned subcomponents, so what kind of components are called positioned subcomponents? A subcomponent that uses a Positioned package is a positioned subcomponent, and the usage is as follows:

Stack (alignment: Alignment.center, children: [Container (height: 200,200, width: 200, color: Colors.red,), Positioned (left: 10, right: 10, bottom: 10, top: 10, child: Container (color: Colors.green,)],)

The Positioned component can specify the distance from each side of the Stack, as follows:

If the subcomponent exceeds the Stack boundary and is controlled by overflow, the default is cropping, and the following settings are always shown:

Stack (overflow: Overflow.visible, children: [Container (height: 200,200, width: 200, color: Colors.red,), Positioned (left: 100,100,100,150, width: 150,150, child: Container (color: Colors.green,)],))

The effect is as follows:

IndexedStack

IndexedStack is a subclass of Stack. Stack overlays all the subcomponents, while IndexedStack displays only the specified subcomponents. The usage is as follows:

IndexedStack (index: _ index, children: [Center (child: Container (height: 300, width: 300, color: Colors.red, alignment: Alignment.center, child: Icon (Icons.fastfood, size: 60, color: Colors.blue,) ), Center (child: Container (height: 300, width: 300, color: Colors.green, alignment: Alignment.center, child: Icon (Icons.cake, size: 60, color: Colors.blue,)) ), Center (child: Container (height: 300, width: 300, color: Colors.yellow, alignment: Alignment.center, child: Icon (Icons.local_cafe, size: 60, color: Colors.blue,),) ),])

Update the _ index value by clicking the button, the code is as follows:

Row (mainAxisAlignment: MainAxisAlignment.center, children: [IconButton (icon: Icon (Icons.fastfood), onPressed: () {setState (() {_ index = 0;})) },), IconButton (icon: Icon (Icons.cake), onPressed: () {setState () {_ index = 1;}) },), IconButton (icon: Icon (Icons.local_cafe), onPressed: () {setState () {_ index = 2;});},),],)

The effect is as follows:

Positioned

Positioned is used to locate the Stack sub-component. Positioned must be a sub-component of Stack. The basic usage is as follows:

Stack (children: [Positioned (left: 10, right: 10, top: 10, bottom: 10, child: Container (color: Colors.red),),])

The effect is as follows:

This is the end of the content of "how to use Flutter overlay Stack". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.