[Flutter] How to get inherit size of bottomNavBar contents to dynamically size the bottom nav?

I want to size the BottomAppBar by affecting its height using the preferred and or inherit height of its contents (children).

I need to do this to decrease code duplication and potentially make it easy to maintain the code base later on. I have a wizard of about 9 steps and some of the buttons can vary, meaning that I need to manually assign a height value to the BottomAppBar widget if I want no overflow errors.

Current Documentation of the BottomNavBar widget in flutter:

/// The double value used to indicate the height of the [BottomAppBar].
/// If this is null, the default value is the minimum in relation to the content,
/// unless [ThemeData.useMaterial3] is true, in which case it defaults to 80.0.
/// final double? height;



Due to material3, its using a preferred size defined in material3, its about 80. Meaning that it defaults to that size if its null or if no height is provided to the widget. Therefore, it cannot size dynamically as material 3 is restricting it from doing so.

Attempted Solutions:


The tried 3 options for sizing the widget dynamically, which as I now understand, cannot occur due to the restriction:

1. Usage of LayoutBuilder
2. Usage of IntrinsicHeight
3. Usage of MediaQuery

Usage of LayoutBuilder:



Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
TLoggerHelper.info(constraints.toString());
return BottomAppBar(
child: Container(
color: Theme.of(context).bottomAppBarTheme.color,
child: Column(
crossAxisAlignment: expand == true
? CrossAxisAlignment.stretch
: centerContent == false
? CrossAxisAlignment.start
: CrossAxisAlignment.center,
children: [
/// App footer
showMsaText == true
? const Column(
children: [
TAppFooter(),
SizedBox(height: TSizes.spaceBtwItemsSm),
],
)
: const SizedBox.shrink(),

/// Bottom Nav content
if (button != null)
button!
else if (bottomNavBarContent != null)
bottomNavBarContent!(context)
],
),
),
);
},
);


Constraint output: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=914.3)

That constaint only has the max width and height of the physical screen rather than the space that the bottom app must occupy to render all of its children without overflow issues.

Usage of IntrinsicHeight:


As previously mention with the BottomAppBar itself, if no height is given, it results in a null height which defaults to the specified and standarized height of 80.

IntrinsicHeight should have worked as it precalculates the intrinsicHeight of the children and assigns it to the container.

Usage of MediaQuery:


I pass in a height to the custom component using MediaQuery.of(context).size.height with a multiplier to provide dynamic sizing.

This works but again, it involves static values being assigned to the bottomNavBar. I don't know what the runtime height will be. I am only approximating it, literally eyeballing it.

Possible Solutions:


The only two other solutions I can think of is sticking with media query and assigning static heights dynamically calculated for the bottomNavBar.

Or, creating my own custom widget that has a container, which should support the use of intrinsicHeight.

If any of you have had the same issue, I would love to hear how you resolved it. What is a more elegant way of resolving this?

Thank you in advance

Continue reading...