How to create Stack layout overlapping Widgets together in Flutter App

If you want to build a beautiful User Interface of the App, you need to know all kinds of Widgets available in Flutter. In this example, I have used Stack() and Positioned() widget to overlap multiple containers together.

See the example below, and learn to create Stacked layout overlapping widgets together.

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

//set this class on home: attribute at main.dart file
class MyStackBox extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
      return Scaffold(

          appBar: AppBar( 
            title: Text("Stack Two Containers"),
            backgroundColor: Colors.redAccent,
          ),

          body: Container( 
              height: 200,
              margin: EdgeInsets.all(20),
              decoration: BoxDecoration( //decoration for the outer wrapper
                        color: Colors.deepOrangeAccent,
                        borderRadius: BorderRadius.circular(30), //border radius exactly to ClipRRect
                        boxShadow:[ 
                            BoxShadow(
                                color: Colors.grey.withOpacity(0.5), //color of shadow
                                spreadRadius: 5, //spread radius
                                blurRadius: 7, // blur radius
                                offset: Offset(0, 2), // changes position of shadow
                                //first paramerter of offset is left-right
                                //second parameter is top to down
                            ),
                            //you can set more BoxShadow() here
                            ],
                      ) ,
              child: ClipRRect( //to clip overflown positioned containers.
                borderRadius: BorderRadius.circular(30),
                //if we set border radius on container, the overflown content get displayed at corner.
                child:Container( 

                      child: Stack(children: <Widget>[ //Stack helps to overlap widgets
                            Positioned( //positioned helps to position widget wherever we want.
                              top:-20, left:-50, //position of the widget
                              child:Container( 
                                  height:250,
                                  width:250,
                                  decoration:BoxDecoration(
                                    shape:BoxShape.circle,
                                    color:Colors.orange.withOpacity(0.5) //background color with opacity
                                  )
                              )
                            ),

                            Positioned(
                              left:-80,top:-50,
                              child:Container( 
                                  height:180,
                                  width:180,
                                  decoration:BoxDecoration(
                                    shape:BoxShape.circle,
                                    color:Colors.redAccent.withOpacity(0.5)
                                  )
                              )
                            ),

                            Positioned(  //main content container postition.
                              child: Container(
                                height:250,
                                alignment: Alignment.center,
                                child:Text("Stacked Containers Together", style: TextStyle(
                                    color:Colors.white, fontSize:20,
                                  ),
                                  textAlign: TextAlign.center,
                                )
                              ),
                            )
                      ],)
                  ),
              ),
          ),
      );
  }
}