|6| Stack

Stack:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,

      home: MyHomepage(),
    );
  }
}

class MyHomepage extends StatefulWidget {
  @override  _MyHomepageState createState() => _MyHomepageState();
}

class _MyHomepageState extends State<MyHomepage> {
  AlignmentDirectional _alignmentDirectional = AlignmentDirectional.centerStart;

  @override  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(

        title: Text(
          "Stack",
          style: TextStyle(
            // color: Colors.pink          ),
        ),
        backgroundColor: Colors.purple,
      ),
      body: Center(
        child: Stack(
          alignment: _alignmentDirectional,
          children: <Widget>[
            Container(width: 300.0, height: 300.0, color: Colors.pink),
            Container(width: 200.0, height: 200.0, color: Colors.yellow),
            Container(width: 100.0, height: 100.0, color: Colors.blue),
          ],
        ),
      ),
      bottomNavigationBar: _getBottomBar(),
    );
  }

  Widget _getBottomBar() {
    const kAlignmentDirectionalVals = <String, AlignmentDirectional>{
      'topStart': AlignmentDirectional.topStart,
      'centerStart': AlignmentDirectional.centerStart,
      'bottomStart': AlignmentDirectional.bottomStart,
      'topCenter': AlignmentDirectional.topCenter,
      'centerEnd': AlignmentDirectional.centerEnd,
      'bottomCenter': AlignmentDirectional.bottomCenter,
      'topEnd': AlignmentDirectional.topEnd,
      'center': AlignmentDirectional.center,
      'bottomEnd': AlignmentDirectional.bottomEnd,

    };
    return Material(
      color: Theme.of(context).buttonColor,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ListTile(
            title: Text('alignmentDirectional:'),
            trailing: DropdownButton<AlignmentDirectional>(
              value: _alignmentDirectional,
              onChanged: (AlignmentDirectional newVal) {
                if (newVal != null) {
                  setState(() => this._alignmentDirectional = newVal);
                }
              },
              items: kAlignmentDirectionalVals
                  .map(
                    (String name, AlignmentDirectional val) => MapEntry(
                  name,
                  DropdownMenuItem(value: val, child: Text(name)),
                ),
              )
                  .values                  .toList(),
            ),
          ),
        ],
      ),
    );
  }
}