Widgets Positioning using Stack in Flutter

A Stack allows position its children's on top of each other. A child position can be controlled using Positioned class. It has top, right, bottom, and left properties which defines the distances.

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: MyApp()));

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Stack')),
        body: Stack(
          children: <Widget>[
            Positioned(
              top: 0,
              left: 0,
              child: Container(
                color: Colors.lightGreen,
                width: 150.0,
                height: 150.0,
              ),
            ),
            Positioned(
              top: 50,
              left: 50,
              child: Container(
                color: Colors.orange,
                width: 150.0,
                height: 150.0,
              ),
            ),
          ],
        ));
  }
}