Align bottom center a text inside a Container of stack - flutter

Question

It's the first time I use Flutter and I'm having some problem aligning containers.
Here is my code:
#override
Widget build(BuildContext context) {
return const MyItem(
imgSrc: 'https://images.unsplash.com/photo-1610655012457-9cbd66fe510b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80',
text: 'Lorem ipsum');
}
class MyItem extends StatelessWidget {
const MyItem(
{Key? key,
required this.imgSrc,
required this.text})
: super(key: key);
final String imgSrc;
final String text;
#override
Widget build(BuildContext context) {
return Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.purple, width: 3)),
margin: const EdgeInsets.symmetric(horizontal: 3),
child: Stack(children: [
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent, width: 3)),
child: Image.network(imgSrc, fit: BoxFit.cover),
),
Container(
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
border: Border.all(color: Colors.orange, width: 3)),
child: Text(
text.toUpperCase(),
style: const TextStyle(
color: Colors.white,
fontSize: 14.0,
fontWeight: FontWeight.bold),
),
),
]));
}
}
The result is:
But I want the text lorem ipsum at the bottom side, not near the top side.
Seems like alignment: Alignment.bottomCenter doesn't work.
What am I missing?

Answer 1

You just have to wrap the container widget with the Positioned widget, just tell the bottom: 0,
import 'package:flutter/material.dart';
class MyItem extends StatelessWidget {
const MyItem ({Key? key}) : super(key: key);
final imgSrc =
'https://images.unsplash.com/photo-1610655012457-9cbd66fe510b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80';
final String text = 'Lorem ipsum';
#override
Widget build(BuildContext context) {
return Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.purple, width: 3)),
margin: const EdgeInsets.symmetric(horizontal: 3),
child: Stack(
children: [
Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent, width: 3)),
child: Image.network(imgSrc, fit: BoxFit.cover),
),
Positioned(
bottom: 0,
width: MediaQuery.of(context).size.width,
child: Container(
height: 50,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.orange, width: 3),
),
child: Text(
'$text'.toUpperCase(),
//text.toUpperCase(),
style: const TextStyle(
color: Colors.white,
fontSize: 14.0,
fontWeight: FontWeight.bold),
),
),
),
],
),
);
}
}

Answer 2

You also can use below codes
class MyItem extends StatelessWidget {
const MyItem({Key? key, required this.imgSrc, required this.text})
: super(key: key);
final String imgSrc;
final String text;
#override
Widget build(BuildContext context) {
return Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.purple, width: 3)),
margin: const EdgeInsets.symmetric(horizontal: 3),
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
imgSrc,
),
fit: BoxFit.cover),
border: Border.all(color: Colors.blueAccent, width: 3)),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.orange, width: 3)),
child: Text(
text.toUpperCase(),
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.white,
fontSize: 14.0,
fontWeight: FontWeight.bold),
),
),
));
}
}

Answer 3

You must fix the height and width of Stack as it is like a graph, where the centre is (0,0). There x & y has a value from -1 to 1 in the container. You go up from the centre value goes nearer to -1 and down +1 same as If you go left -1 right +1.
After that, you can use AlignmentDirectional to tell where exactly you want to put chid of the stack. in your case as below.
Align(
alignment: const AlignmentDirectional(0, 1),
child: SizedBox()....
==Now coming to your code must be like this... review comments in the same too.
#override
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width * 1,
//Master container size of mobile screen and limits of stack.
height: MediaQuery.of(context).size.height * 1,
decoration: BoxDecoration(
border: Border.all(color: Colors.purple, width: 3),
),
margin: const EdgeInsets.symmetric(horizontal: 3),
child: Stack(
children: [
Align(
alignment: const AlignmentDirectional(0, 0),
child: Container(
width:
MediaQuery.of(context).size.width * 1, //You can fix your own
height: MediaQuery.of(context).size.height * 1,
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent, width: 3),
),
child: Image.network(imgSrc, fit: BoxFit.cover),
),
),
Align(
alignment: const AlignmentDirectional(0, 1),
child: Container(
width: MediaQuery.of(context).size.width * 1,
//You can fix your own
height: MediaQuery.of(context).size.height * 0.1,
/*alignment: Alignment.bottomCenter,*/
//This will only work inside of container.
decoration: BoxDecoration(
border: Border.all(color: Colors.orange, width: 3),
),
child: Text(
text.toUpperCase(),
style: const TextStyle(
color: Colors.white,
fontSize: 14.0,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
);
}

Answer 4

You should use the Align widget. with assign value to the alignment attribute the container will expand to fill its parent and position its child within itself according to the given value.
here is the sample :
class MyItem extends StatelessWidget {
const MyItem(
{Key? key,
required this.imgSrc,
required this.text})
: super(key: key);
final String imgSrc;
final String text;
#override
Widget build(BuildContext context) {
return Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.purple, width: 3)),
margin: const EdgeInsets.symmetric(horizontal: 3),
child: Stack(children: [
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent, width: 3)),
child: Image.network(imgSrc, fit: BoxFit.cover),
),
Align(
alignment: Alignment.bottomCenter,
child:Container(
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
border: Border.all(color: Colors.orange, width: 3)),
child: Text(
text.toUpperCase(),
style: const TextStyle(
color: Colors.white,
fontSize: 14.0,
fontWeight: FontWeight.bold),
),
),),
]));
}
}