How to get the height of widget as a double value? - flutter

Question

I am working with a NestedScrollView and a SliverAppBar and need to make adjusments to the expandedHeight: value of the SliverAppBar based on the height of a widget hosting some text. Currently the expandedHeight: is 400.0. However, because of the text widget the 400.0 value may not always render an appropriate design. So I want to make the expandedHeight: relative by adding the height of the text widget to the static 400.0 value.
Like this:
expandedHeight: 400.0 + textWidgetHeight
I need some help getting only the height value of the widget as a double.
This is the code for the widget:
Container _textWidget(String text) {
return Container(
width: 180.0,
margin: EdgeInsets.only(
top: 15.0,
),
child: Text(
text,
textAlign: TextAlign.center,
style: TextStyle(
color: AppTheme.define().hintColor,
fontFamily: 'RobotoMedium',
fontSize: 10.0,
),
),
);
}

Answer 1

you can do this, using a combination of context.size and SchedulerBinding.instance.addPostFrameCallback.
SchedulerBinding.instance.addPostFrameCallback is used inside the build method of a Widget or State to schedule a callback function once the rendering of the current frame is completed.
So, first make your _textWidget into a new StatelessWidget,
class TextWidget extends StatelessWidget {
String text;
var onTextBuild;
TextWiidget(this.text, this.onTextBuild);
Widget build(BuildContext context) {
SchedulerBinding.instance?.addPostFrameCallback((timeStamp) {
// This will be called once this frame is built.
onTextBuild(context.size); // context.size gives the Size that this widget ha occupied.
});
return Container(
width: 180.0,
margin: EdgeInsets.only(top: 15.0),
child: Text(
text,
textAlign: TextAlign.center,
style: TextStyle(
color: AppTheme.define().hintColor,
fontFamily: 'RobotoMedium',
fontSize: 10.0,
),
),
);
}
}
Now, when you are using your TextWidget, ensure it's parent is a StatefulWidget and create a new state variable,
Size textWidgetSize = Size(0, 0);
And while using your TextWidget, use it like this to get the size and update state.
....
TextWidget(text, (size) {
setState(() {
textWidgetSize = size;
});
}),
....
Then, in your SliverAppBar, you can use your new state variable like this,
expandedHeight: 400 + (textWidgetSize != null ? textWidgetSize.height : 0),