IntrinsicWidth Widget – Flutter Widget Guide By Flutter Agency

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

What is IntrinsicWidth Widget?

IntrinsicWidth Widget is a widget that sizes its child to the child’s intrinsic width.

IntrinsicWidth Widget is useful when unlimited width is available and users would like a child that would otherwise attempt to expand infinitely to instead size itself to a more reasonable width.

When users want all the widgets inside Row Widget or Column Widget to be as wide as the widest widget users can make use of IntrinsicWidth.

Default Constructor for it will look like below :

IntrinsicWidth({
   Key key,
   double stepWidth,
   double stepHeight,
   Widget child,
 });

Properties :

  • key: The widget key, used to control if it should be replaced.
  • stepWidth: stepWidth will force its child’s width to Multiple of this Value. This value must be null or > 0.0.
  • stepHeight: stepHeight will set its a child’s height to be multiple of this Value. If null or 0.0 the child’s height will not be constrained. Its value must not be negative.
  • 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.
Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          RaisedButton(
            onPressed: () {},
            child: Text('Short'),
          ),
          RaisedButton(
            onPressed: () {},
            child: Text('A bit Longer'),
          ),
          RaisedButton(
            onPressed: () {},
            child: Text('The Longest text button'),
          ),
        ],
      ),

We will get output like below :

IntrinsicWidth Widget - Flutter Widget Guide By Flutter Agency

Without IntrinsicWidth

How to use IntrinsicWidth Widget in Flutter?

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

If we want to a width of all Buttons the same as IntrinsicWidth.Our code snippet will look like below:

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

We will get output like below:

InstrisicWidth Widget

With InstrisicWidth Widget

Conclusion:

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

Thanks for being with us on Flutter Journey!!!
Do let us give us your suggestion feedback.

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