I have this code in bottomNavigationBar
"
bottomNavigationBar: BottomAppBar(
child: IntrinsicHeight(
child: Row(
children: <Widget>[
IconButton(
icon: Icon(Icons.arrow_back_ios),
onPressed: () => Navigator.of(context).pop(),
),
Spacer(),
IconButton(
icon: Text(
"QR",
style: Theme.of(context).textTheme.title,
),
onPressed: () => Navigator.of(context).pop(),
),
VerticalDivider(
color: Theme.of(context).textTheme.headline.color,
),
IconButton(
icon: Icon(Icons.share),
onPressed: () => Navigator.of(context).pop(),
),
],
),
),
),
And the code works as expected.
If I remove IntrinsicHeight widget, the divider goes all the way across all screen.
The reason I want an alternative is because in the documentation of IntrinsicHeight
it says:
This class is relatively expensive. Avoid using it where possible.
What would be the cheap alternative?
Thank you
If you're looking for "a cheap way to have the row fit the min height of dynamic content", then there are none.
The cheap solution is, to have a fixed height on the Row
– typically by wrapping it in SizedBox
:
SizedBox(
height: 42,
child: Row(...),
)
This works well if the content has a fixed height. But it won't if the height is dynamic.
In this specific case, you could either use SizedBox with height=48 (this is the default height of the IconButton widget) or avoid using VerticalDivider and draw it by adding a left border to the share icon.
Container(
decoration: BoxDecoration(
border: Border(
left: Divider.createBorderSide(
context,
color: Theme.of(context).textTheme.headline.color,
),
),
),
child: IconButton(
icon: Icon(Icons.share),
onPressed: () => Navigator.of(context).pop(),
),
),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With