how to position a child (the container with the text) in the bottom and make it's width the same as his sybilings and keep the text in the center

Issue

I’m trying to put the second container (the one with the text) in the bottom, and i want to make the Black color Opacity the same width as the first container (image), and keep the text in the center

child: Stack(

             children: <Widget>
                [
           Container
           (
             padding: EdgeInsets.fromLTRB(0,0,0,0),

             child: new Image
                (
                  image: new AssetImage('images/99.jpg'), 
                  fit: BoxFit.cover
                )
                ),

            new Positioned(

               bottom: 0,

               child: Container
              (
                padding: EdgeInsets.all(7.0),

                color: Colors.black.withOpacity(0.3),


                child: Text("The text", style: TextStyle(color: Colors.white, fontSize: 25.0), textAlign: TextAlign.center,), 


                ),


                  ),

enter image description here

Solution

I think, you are searching it —

enter image description here

Here is the code for this container —

 child: Stack(
            children: <Widget>[
              Container(
                color: Colors.green,
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height / 2,
              ),
              Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height / 2,
                child: Align(
                    alignment: Alignment.bottomCenter,
                    child: Container(
                      color: Colors.black12,
                      height: 50.0,
                      width: MediaQuery.of(context).size.width,
                      child: Center(child: Text("abirahsan122@gmail.com")),
                    )),
              )
            ],
          ),

Answered By – Abir Ahsan

Answer Checked By – David Marino (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.