What is the alternative to IntrinsicHeight in flutter?

Question

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

Answer 1

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.

Answer 2

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(),
            ),
          ),