Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the alternative to IntrinsicHeight in flutter?

Tags:

flutter

dart

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.

enter image description here

If I remove IntrinsicHeight widget, the divider goes all the way across all screen.

enter image description here

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

like image 251
Tree Avatar asked Aug 02 '19 14:08

Tree


2 Answers

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.

like image 155
Rémi Rousselet Avatar answered Nov 02 '22 15:11

Rémi Rousselet


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(),
            ),
          ),
like image 32
Shay Avatar answered Nov 02 '22 15:11

Shay