Stack: cover bottom child with top child - flutter

Question

I want overlay a widget over the bottom widget to hide it. hence I use stack. I don't know the bottom widget size so I can't give top widget fixed size.
what I have:
what I want to achieve:
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Winner: ',
style: TextStyle(fontSize: 34),
),
Stack(
children: [
Text('YOU!!!', style: TextStyle(fontSize: 34)),
Container(
color: Colors.amber,
)
],
),
],
),
This is simplified version of what I want to achive. I have to use Row and assume Texts are any widget with any size.
Stack sizes its children based on the Constraint it receives from parent not based on children sizes.
how can I overlay top widget with exact size of bottom widget?

Answer 1

To know the size of your widget and apply things depending on this, you can use GlobalKey like this GlobalKey key;. Initialize it in your initSate and listen to it's size
GlobalKey key;
double yourWidgetWidth;
double yourWidgetHeight;
#override
initState() {
// .... other stuffs
key = GlobalKey();
WidgetsBinding.instance.addPostFrameCallback((_) {
if (mounted) {
yourWidgetWidth = containerKey.currentContext.size.width;
yourWidgetHeight = containerKey.currentContext.size.height;
}
});
}
And with yourWidgetWidth and yourWidgetHeight you can achieve what you want
Edit
Here is a concept of what am trying to explain
// In variable declaration scope
GlobalKey youTextKey = GlobalKey();
ValueNotifier widthNotifier = ValueNotifier(0);
ValueNotifier heightNotifier = ValueNotifier(0);
// In initState
WidgetsBinding.instance.addPostFrameCallback((_) {
if (mounted) {
widthNotifier.value = youTextKey.currentContext.size.width - 1.0;
heightNotifier.value = youTextKey.currentContext.size.height - 5.0;
}
});
// Your row
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Winner: ',
style: TextStyle(fontSize: 34),
),
Stack(
children: [
Text('YOU!!!', style: TextStyle(fontSize: 34), key: youTextKey,),
ValueListenableBuilder(
valueListenable: widthNotifier,
builder: (context, width, _) {
return ValueListenableBuilder(
valueListenable: heightNotifier,
builder: (context, height, _) {
return Container(
width: width,
height: height,
color: Colors.amber,
);
},
);
},
),
],
),
],
)

Answer 2

Using Positioned.Fill solved the problem:
Positioned.Fill Creates a Positioned object with [left], [top], [right], and [bottom] set to 0.0 unless a value for them is passed.
so the Positioned child get stretched to the edges of the stack's biggest child.
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Winner: ',
style: TextStyle(fontSize: 34),
),
Stack(
children: [
Text('YOU!!!', style: TextStyle(fontSize: 34)),
Positioned.fill(
child: Container(
color: Colors.amber,
),
)
],
),
],
),