Stack

Helpful widget

Content

Stack widget in Flutter is used to layer widgets on top of each other. It is similar to a stack of paper where you can add or remove papers from the top of the stack. In Flutter, you can add or remove widgets from the top of the Stack widget.

Example:

Stack(
  children: <Widget>[
    Positioned(
      left: 10.0,
      top: 10.0,
      child: Text('I am on top!'),
    ),
    Text('Hello World!'),
  ],
)

In the above example, the Positioned widget is layered on top of the Text widget using the Stack widget. The Positioned widget is positioned at the top left corner and the Text widget is positioned at the center of the Stack widget.

Stack widget is very useful when you want to overlap widgets or create complex layouts in your app.

A more detailed example

Here is another example where we want to layer an image and some text on top of each other:

Stack(
  children: <Widget>[
    Image.asset(
      'assets/images/landscape.jpg',
      fit: BoxFit.cover,
      height: double.infinity,
      width: double.infinity,
    ),
    Positioned(
      bottom: 0,
      left: 0,
      right: 0,
      child: Container(
        padding: EdgeInsets.all(16.0),
        color: Colors.black.withOpacity(0.5),
        child: Text(
          'A beautiful landscape',
          style: TextStyle(
            color: Colors.white,
            fontSize: 24.0,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    ),
  ],
)

In this example, we have an image of a landscape that we want to display with a text overlay. We use the Image.asset widget to display the image, and set its height and width to fill the available space using double.infinity. We also set fit: BoxFit.cover to ensure that the image covers the entire Stack widget.

We then use a Positioned widget to position the text at the bottom of the Stack widget. We set the bottom, left, and right properties to 0 to make sure that the text container fills the width of the Stack widget. We also give the text container a semi-transparent black background using the Colors.black.withOpacity(0.5) property. Finally, we use a Text widget to display the text on top of the background.