Label(text) at the bottom side of image in flutter - flutter

Question

I have a custom build widget for grid view, in which i am either sending Icon or image to display along with Text (label). Now when i send icon i can display the test below icon, but when i am trying image i am not sure if the below approach is correct to display text or not, i am trying to put EdgeInsets in the container. I think it might fail due to pixel overload, but in my emulator, it seems to be fine.. Is there any better option for this scenario or the approach I am following is ok?
if (image != null) ...[
Container(
margin: EdgeInsets.only(top:150.0),
),
] else ...[
child ?? Container(),
],
Text('$label',
style: TextStyle(
color: AppColors.lightBlue,
fontSize: 20,
),),

Answer 1

If I am getting your problem well, then the solution is to use Alignment Class Flutter, in the Container. What this will do, is it allows the child of the Container to be aligned the way we want to align it. Since your requirement is to align the text at the bottom center, hence we would use the Alignment property, Alignment.bottomCenter.
Please Note: This will tell you how to align the content which will not be disturbed as per the device size, with a background image
SOLUTION 1 [EFFICIENT]
Container(
height: MediaQuery.of(context).size.height * 0.3, // ignore this, cos I am giving height to the container
width: MediaQuery.of(context).size.width * 0.5, // ignore this, cos I am giving width to the container
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage('https://i.pinimg.com/originals/0c/96/b1/0c96b19dc89ffdaa7ff737cfc04a095f.png')
)
),
alignment: Alignment.bottomCenter, // This aligns the child of the container
child: Padding(
padding: EdgeInsets.only(bottom: 10.0), //some spacing to the child from bottom
child: Text('Hello', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold))
)
)
The output would look like this now:
You can check this piece of code in any of the device, and it will show up just fine.
SOLUTION 2 [NOT RECOMMENDED]
Now, if you really want the margin, there is a cleaner way to do it, and that is using MediaQuery, as you can see in the above code also for giving out height and width.
Now, the question arises, what MediaQuery is, you can find it here, or in a simpler statement, it takes care of the size of the device. Now, whenever, we are concerned about the size of the device with the content alignment, we can use MediaQuery, and what it does, is it will adjust the margin/height/width/padding etc according to the Device size, and will look the same everywhere
How we can do that, I will just use your code only, and since you want the text to come at the bottom with the use of margin. Here, how you can do that
Container(
height: MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width * 0.5,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage('https://i.pinimg.com/originals/0c/96/b1/0c96b19dc89ffdaa7ff737cfc04a095f.png')
)
),
child: Container(
margin: EdgeInsets.only(top: MediaQuery.of(context).size.height * 0.25),
child: Text('Hello', textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold))
)
)
OUTPUT
MediaQuery.of(context).size.height = device height, and when we multiply, it does the math according to the device, and align the content. Similarly for MediaQuery.of(context).size.width= device width
I would suggest SOLUTION 1 only, since it is clean, and would not let you do a lot in nested child. I hope that clears your doubt. Let me know. Thanks :)