How to make text center inside stack - flutter

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 workgingHow 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,
),
),
)