Using The Stack Widget

The Stack widget is commonly used to overlap, position, and align widgets to create a custom look. A good example is a shopping cart with the number of items to purchase on the upper-right side.

The Stack children list of the widget is either positioned or nonpositioned. When you use a Positioned widget, each child widget is placed at the appropriate location.

The Stack widget resizes itself to accommodate all of the nonpositioned children. The nonpositioned children are positioned to the alignment property (Top-Left or Top-Right depending on the left-to-right or right-to-left environment). 

Each Stack child widget is drawn in order from bottom to top, like stacking pieces of paper on top of each other. 

This means the first widget drawn is at the bottom of the Stack, and then the next widget is drawn above the previous widget and so on. Each child widget is positioned on top of each other in the order of the Stack children list. The RenderStack class handles the stack layout.

To align each child in the Stack, you use the Positioned widget. By using the top, bottom, left, and right properties, you align each child widget within the Stack. The height and width properties of the Positioned widget can also be set

Stack(  

  children: <Widget>[  

    // Max Size  

    Container(  

      color: Colors.green,  

    ),  

    Container(  

      color: Colors.blue,  

    ),  

    Container(  

      color: Colors.yellow,  

    )  

  ],  

),

It will give the following output:

import 'package:flutter/material.dart';
class StackFavoriteWidget extends StatelessWidget {
  const StackFavoriteWidget({
    Key key,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black87,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Stack(
          children: <Widget>[
            Image(
              image: AssetImage('assets/images/dawn.jpg'),
            ),
            Positioned(
              top: 0.0,
              right: 0.0,
              child: FractionalTranslation(
                translation: Offset(0.3, -0.3),
                child: CircleAvatar(
                  radius: 24.0,
                  backgroundColor: Colors.white30,
                  child: Icon(
                    Icons.star,
                    size: 24.0,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
            Positioned(
              bottom: 10.0,
              242 ❘ CHAPTER 9 Creating Scrolling Lists and Effects
              right: 10.0,
              child: CircleAvatar(
                radius: 48.0,
                backgroundImage: AssetImage('assets/images/eagle.jpg'),
              ),
            ),
            Positioned(
              bottom: 16.0,
              left: 16.0,
              child: Text(
                'Bald Eagle',
                style: TextStyle(
                  fontSize: 32.0,
                  color: Colors.white30,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

HOW IT WORKS

 The Stack takes a children list of widgets and sizes itself to accommodate all of the nonpositioned widgets. When you use nonpositioned widgets in the Stack, they are automatically positioned to the setting of alignment (Top-Left or Top-Right depending on environment). Each Stack child widget is drawn in order from bottom to top, meaning each child widget is positioned on top of each other.