Stack Widget

A stack widget is a widget that positions its children relative to the edges of its box.
Consider the code below:

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Stack(
      children: <Widget>[
        Container(
          width: 200, height: 200,
          color: Colors.red,
        ),
        Container(
          width: 150, height: 150,
          color: Colors.green,
        ),
        Container(
          width: 100, height: 100,
          color: Colors.blue,
        ),
      ],
    )));
  }
}

The first thing to note is that with Stack, the child widgets are layers on top of one another instead of side by side. Also, the top-most one is the one behind in all the layers.
Each child in a Stack widget is either positioned or non-positioned. The child widgets above are non-positioned hence are aligned w.r.t. the top-left corner.

To change the origin of alignment, use the enum AlignmentDirectional to choose the origin of alignment.

// ...
body: Stack(
alignment: AlignmentDirectional.bottomEnd,
children: <Widget>[
// ...

// ...
body: Stack(
alignment: AlignmentDirectional.center,
children: <Widget>[
// ...

To make, let's say, the third Container positioned, we can wrap it in Positioned widget. This widget helps to position the child widget with respect to the edge of the stack size.

Note: Remove the alignment line of code in Stack widget.

// ...
children: <Widget>[
Container(
    width: 200,
    height: 200,
    color: Colors.red,
),
Container(
    width: 150,
    height: 150,
    color: Colors.green,
),
Positioned(
    bottom: 0,
    right: 0,
    child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
    ),
),
],
// ...

Notice that to position a widget to the bottom right edge, we have to pass values 0 and 0 to the bottom and right parameters of Positioned, respectively.

However, there's another thing. When we position the child widget in such a way it overlaps the stack size, it becomes clipped.

// ...
children: <Widget>[
Container(
    width: 200,
    height: 200,
    color: Colors.red,
),
Container(
    width: 150,
    height: 150,
    color: Colors.green,
),
Positioned(
    bottom: -50,
    right: -50,
    child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
    ),
),
],
// ...

How do we account for this? So, the reason for this is that, the overflow for stack is clipped by default. Hence, we can use clipBehavior property to solve this. Using the enum Clip.none, the overflow for Positioned widget will be visible.

Note:overflow: Overflow.visible is deprecated as of the writing of this lesson, using Flutter 3.3.5

// ...
body: Stack(
  clipBehavior: Clip.none,
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    Container(
      width: 150,
      height: 150,
      color: Colors.green,
    ),
    Positioned(
      bottom: -50,
      right: -50,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    ),
  ],
)
// ...