How to stack a container over the image like in this figma design?

Question

How to make a container is stack over the image like this picture Figma Design

i made the code and its fail

`` Stack( children: [ Positioned( left : MediaQuery.of(context).size.width * 0.2, right :0, top : 0, bottom : MediaQuery.of(context).size.width * 0.03, child : Container(

              height: MediaQuery.of(context).size.width * 0.3,
              width: MediaQuery.of(context).size.width * 0.3,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(16),
                image: DecorationImage(
                  image: AssetImage('images/dashboard.png'),
                  fit: BoxFit.cover,
                ),
                shape: BoxShape.rectangle,
              ),
            ),
),

  Container(
  height: MediaQuery.of(context).size.height * 0.15,
  width: MediaQuery.of(context).size.width * 0.3,
  margin: EdgeInsets.only(top: 30, bottom: 50),
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Color.fromARGB(255, 0, 99, 180),
        blurRadius: 30,
      ),
    ],
    color: Color.fromARGB(255, 253, 253, 253),
    border: Border.all(color: Color(0xff475BD8)),
    borderRadius: BorderRadius.circular(16),
  ),
  child: GestureDetector(
    onTap: () {
      Navigator.of(context).push(
        MaterialPageRoute(
          builder: (context) {
            return dashboard2();
          },
        ),
      );
    },
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          "Dashboard",
          textAlign: TextAlign.left,
          style: TextStyle(
            
            fontSize: calculateFontSize(context,17),
            fontWeight: FontWeight.w500,
            fontFamily: 'David Libre',
            color: Colors.black,
          ),
        ),



    
      ],
    ),
  ),
),

], ),

``

the result of that code is not like the figma design flutter result

code fix, so the container can stack over the image like in the figma design

Answer 1

To achieve the Figma design, you can follow the steps below:

1. Create a top-level container with a specified width and height.
2. Inside the container, use a stack with positioned children.

Here is the example -

 Container(
            height: 180,
            width: 220,
            color: Colors.grey,
            child: Stack(
              children: [
                Positioned(
                  right: 24,
                  top: 24,
                  bottom: 24,
                  child: Container(
                    color: Colors.red,
                    width: 140,
                  ),
                ),
                Positioned(
                  left: 0,
                  top: 48,
                  bottom: 48,
                  child: Container(
                      color: Colors.yellow,
                      child: Center(child: Text('Dashboard'))),
                ),
              ],
            ),
          );

Output -

You can edit the stack top-level and children containers width and height as per your design.