IntrinsicHeight Widget – Flutter Widget Guide By Flutter Agency

· 4 min read
IntrinsicHeight Widget - Flutter Widget Guide By Flutter Agency
IntrinsicHeight Widget - Flutter Widget Guide By Flutter Agency

What is IntrinsicHeight Widget?

IntrinsicHeight Widget is a widget that sizes its child to the child’s intrinsic height.

When the unlimited height is available and the user would like a child that would otherwise attempt to expand infinitely to instead size itself to a more reasonable height user can make use of IntrinsicHeight .

When users want all the widgets inside Row Widget or Column Widget to be as tall as the tallest widget users can make use of IntrinsicHeight Widget.

The Default Constructor of IntrinsicHeight looks like below:

IntrinsicHeight({
  Key key,
  Widget child,
});

Property :

  • key: The widget key, used to control if it should be replaced.
  • child: Child Property represents a widget under the current widget in a tree. Child widgets have only one child. To the user, multiple children users can make use of Column Widget, Row Widget, Stack Widget and provide children to that widget.

How to use IntrinsicHeight Widget in Flutter?

The following code snippet tells us how to implement IntrinsicHeight Widget in Flutter.

Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        RaisedButton(
          onPressed: () {},
          child: Text('Short'),
        ),
        RaisedButton(
          onPressed: () {},
          child: Text('A bit Longer'),
        ),
        Flexible(
          child: RaisedButton(
            onPressed: () {},
            child: Text('The Longest text button'),
          ),
        ),
      ],
    );

We will get output like below:

IntrinsicHeight Widget - Flutter Widget Guide By Flutter Agency

IntrinsicHeight

When we wrap Row Widget with an IntrinsicHeight Widget our code snippet will look like below:

IntrinsicHeight(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          RaisedButton(
            onPressed: () {},
            child: Text('Short'),
          ),
          RaisedButton(
            onPressed: () {},
            child: Text('A bit Longer'),
          ),
          Flexible(
            child: RaisedButton(
              onPressed: () {},
              child: Text('The Longest text button'),
            ),
          ),
        ],
      ),
    );

We will get output like below :

IntrinsicHeight Widget - Flutter Widget Guide By Flutter Agency

IntrinsicHeight

General Queries:

  • Consider an image below

Instinsic Height

To achieve this kind of structure users can consider a code snippet as below:

Padding(
      padding: const EdgeInsets.only(top: 100.0),
      child: IntrinsicHeight(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.stretch, children: [
          Expanded(
            child: Column(children: [
              Container(
                height: 120.0,
                color: Colors.yellow,
              ),
              Container(
                height: 100.0,
                color: Colors.cyan,
              ),
            ]),
          ),
          Expanded(
            child: Container(
              color: Colors.amber,
            ),
          ),
        ]),
      ),
    );

We will receive output as below :

Intrinsic Widget

IntrinsicHeight

Conclusion:

In this article, we have been through What is IntrinsicHeight Widget in Flutter along with how to implement it in a Flutter.

We also have the same IntrinsicWidth Widget article which is used to sizes its child to the child’s intrinsic width.

Thanks for reading !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply