Flutter make container size fit stack size - flutter

Question

I want to make something like in the picture below: A picture with two texts over it.
My first approach was creating a Container with a Stack inside and both Texts inside the Stack; and another Stack with the picture and Texts, but I encountered the problem of having to give a size to the Container that wraps the Stack with the texts. Althought it works that way, it is not a optimal solution for me due to responsiveness reasons.
Is there any way of wrapping a Stack with a Container and let the Container size from the Stack's content? Or is there a better way of achieving what I'm seeking? Thanks in advance. (Sorry for my English).

Answer 1

In your Stack:
Stack(
children: <Widget> [
Image(...), // Your Image here
Positioned.fill( // Expands to the size of your image
child: ..., // Put your Text widgets here in a Stack/Any other way you deem fit
),
],
),

Answer 2

You can use Shadow property to achieve this layout.
Following code will help you more.
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
width: double.infinity,
height: 300,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://miro.medium.com/max/1400/1*U-R58ahr5dtAvtSLGK2wXg.png'),
fit: BoxFit.cover),
),
child: Text(
" Hello world",
style: TextStyle(
fontSize: 50,
color: Colors.white,
shadows: [
Shadow(
color: Colors.amber,
offset: Offset(-30.0, -30.0),
blurRadius: 1.0,
),
],
),
textAlign: TextAlign.center,
),
),
),
);
}

Answer 3

You can also use the double.maxFinite property for the setting the height and width to match parent , like below
Stack(
children: <Widget>[
Container(
height: double.maxFinite,
width: double.maxFinite,
child:
Image.asset('YOOUR_ASSEST_IMAGE_HERE', fit: BoxFit.fill),
),
]
)
And check the another solution of mine using thee Stack, please check it once https://stackoverflow.com/a/58029364/3946958