K-Learn

Flutter Stack Widget

Posted on Friday, 03 March 2023 04:00 PM

The Stack widget in Flutter is used to position widgets on top of each other. 

Here's an example of how to use the Stack widget:

Stack(
  children: [
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 90,
      height: 90,
      color: Colors.green,
    ),
    Container(
      width: 80,
      height: 80,
      color: Colors.blue,
    ),
  ],
)

Some common properties of the Stack widget:

alignment: The alignment of the widgets within the Stack. This property takes a Alignment object that specifies the horizontal and vertical alignment of the widgets. The default value is AlignmentDirectional.topStart.

fit: The fit of the widgets within the Stack. This property takes a StackFit object that specifies how the widgets should be sized within the available space. The default value is StackFit.loose, which allows the widgets to be sized independently of each other.

overflow: The behavior of the Stack widget when the widgets exceed the available space. This property takes a Overflow object that specifies how the widgets should be clipped or displayed when they exceed the available space. The default value is Overflow.clip, which clips the widgets to the available space.