How to make text center inside stack

Question

I want to make my text centered inside of a Stack widget. This is what I have attempted so far. Right now, it's to the left on top of the image and that's not where I want it to be. I've tried using the Align widget and the Center widget but to no avail. What am I doing wrong?

Flexible(
  child: Padding(
    padding: const EdgeInsets.only(left: 8,top: 8,bottom: 8,right: 8),
    child: Stack(
      children: <Widget>[
        Wrap(
          children: <Widget>[ 
            Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
               height: 100,
            ),
          ],
        ),
        Container(
          width: MediaQuery.of(context).size.width/2,
          height: 100,
          child: Center(
            child: Wrap(
              children: <Widget>[
                Center(
                  child: Container(
                    height: 100,
                    width: MediaQuery.of(context).size.width/2,
                    child: Align(
                      alignment: Alignment.center,
                      child: Text(
                        "BOOKS AND BOOKLETS",
                        style: TextStyle(
                          color: Colors.white, 
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  ),
),

Any option to make this text in center

 Expanded(child: Card(
              child: Container(
                child: Center(
                  child:  Stack(
                    children: <Widget>[
                      Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
                        height: 100,
                      ),
                      SafeArea(child: Text("asdad"))
                    ],
                  ),
                ),
              ),
            ))

Problem identifed if text size is small (means "abc") it is working but if text size is large(measn "abc abc abc acb acb abc") it is not workging
How to solve this issue?

Answer 1

You can try it:

Container(
        width: 500,
        height: 100,
        child: Stack(
          children: <Widget>[
            Image.network(
              "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
              height: 100,
              width: 500,
            ),
            Align(
              alignment: Alignment.center,
              child: Text(
                "BOOKS AND BOOKLETS",
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 11,
                    fontWeight: FontWeight.bold),
              ),
            )
          ],
        ),
      )

Answer 2

Solved

 Expanded(
          child: Card(
            child: Container(

              child: Center(
                child: Stack(
                  children: <Widget>[
                    Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
                      height: 100,
                    ),
                    Positioned.fill(
                      child:Center(child:Align(
                        child:  Text("BOOKS AND BOOKLETS",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18,color: Colors.white),textAlign: TextAlign.center,),
                        alignment: Alignment.center,
                      )
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
        ),

Answer 3

I want at it by a different approach, what if you used a Container widget and decorate it using a background image? Then, you can avoid using a Stack widget altogether.

Here's the minimal code:

return Padding(
  padding: const EdgeInsets.all(8),
  child: Container(
    height: 500,
    decoration: BoxDecoration(
      image: DecorationImage(
        image: NetworkImage(
          "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
        ),
      ),
    ),
    child: Center(
      child: Text(
        "hi",
        style: TextStyle(color: Colors.white, fontSize: 56),
      ),
    ),
  ),
);

Answer 4

Use textAlign: TextAlign.center inside your Text Widget

using alignment: Alignment.center inside your Container Widget could also help

No need to use so many widgets just put Text widget inside Container Widget and use alignment property of both widgets

that should resolve the issue.

     Container(
          width: MediaQuery.of(context).size.width/2,
          height: 100,
          alignment: Alignment.center,
             child: Text(
                     "BOOKS AND BOOKLETS",
                     textAlign: TextAlign.center
                     style: TextStyle(
                       color: Colors.white, 
                       fontSize: 18,
                       fontWeight: FontWeight.bold,
                       ),
                     ),
                   )