Flutterexperts

At whatever point you will code for building anything in Flutter, it will be inside a widget. The focal design is to construct the application out of widgets. It depicts how your application view should look with their present configuration and state. At the point when you made any modification in the code, the widget modifies its portrayal by working out the contrast between the past and current widget to decide the insignificant changes for delivering in the UI of the application.

In this blog, we will be Explore IntrinsicWidth In Flutter. We will see how to implement an IntrinsicWidth demo program and show how to use it in your flutter applications.

IntrinsicWidth class – widgets library – Dart API
A widget that sizes its child to the child’s maximum intrinsic width. This class is useful, for example, when unlimited…api. flutter.dev

Table Of Contents::

Introduction

Constructor

Properties

Code Implement

Code File

Conclusion

---

---

Introduction:

IntrinsicWidth is a widget that estimates its child to the child’s intrinsic width. It tends to be helpful if the accessible width is limitless, however you need to set the size of a widget to its intrinsic width.

IntrinsicWidth is when limitless width is free and clients might want a child that would somehow endeavor to expand endlessly to rather estimate itself to a more sensible width.

Constructor:

There are constructor of IntrinsicWidth are:

const IntrinsicWidth({ 
Key key, 
this.stepWidth,
this.stepHeight,
Widget child
 })

Properties :

There are some properties of IntrinsicWidth are:

• > key: The widget key, used to control if it should be replaced.
• > stepWidth: This property will force its child’s width to Multiple of this Value. This value must be null or > 0.0.
• > stepHeight: This property will set 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: This 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 implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called main.dart inside the lib folder.

We should begin with a model where there is a Column widget with the crossAxisAlignment sets to stretch. It has two Container widgets as its children with the second container are wrapped as the child of an Expanded widget. That implies the height of the second container will be extended to the most maximum space. For the width of the Column, since it utilizes CrossAxisAlignment.stretch, it will likewise be expanded to the most maximum space.

final Widget data = Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Container(
      width: 200,
      height: 100,
      color: Colors.cyan,
    ),
    Expanded(
      child: Container(
        width: 100,
        height: 100,
        color: Colors.orange,
      ),
    ),
  ],
);

In the body, we will add IntrinsicWidth() widget. In this widget, we will add the only stepWidth is of 300 and add child property as data.

IntrinsicWidth(
   stepWidth: 300,
  child: data,
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Then, we will set the stepHeight argument to 300. In the past models where the stepHeight isn’t passed, the height of the child expands to occupy the maximum space. Bypassing the stepWidth argument, the height of the child will be set to a base value that is a multiplication of the stepHeight.

IntrinsicWidth(
   stepHeight: 300,
  child: data,
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Utilizing IntrinsicWidth is considered costly due to the need to add a speculative design pass before the final layout phase. Hence, the utilization of IntrinsicWidth ought to be kept away from if conceivable. For the above cases, you can consider utilizing a widget that can be utilized to add limitations to the child, like SizedBox or ConstrainedBox.

Remember that the imperatives applied by IntrinsicWidth the widget should agree with the constraints of the parent. In this way, the child’s width can be not as much as its intrinsic width if the most extreme width limitation from the parent isn’t sufficiently huge. Similarly, the child’s width can be bigger than its inherent width if the base width requirement is bigger than the intrinsic width.

IntrinsicWidth(
   stepWidth: 300,
   stepHeight: 300,
  child: data,
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: _IntrinsicWidthDemo(),
    );
  }
}

class _IntrinsicWidthDemo extends StatelessWidget {

  final Widget data = Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Container(
        width: 200,
        height: 100,
        color: Colors.cyan,
      ),
      Expanded(
        child: Container(
          width: 100,
          height: 100,
          color: Colors.orange,
        ),
      ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.teal,
        title: Text('Flutter IntrinsicWidth Demo'),
      ),
      body: IntrinsicWidth(
         stepWidth: 300,
         stepHeight: 300,
        child: data,
      ),
    );
  }
}

Conclusion:

In the article, I have explained the basic structure of the IntrinsicWidth widget in a flutter; you can modify this code according to your choice. This was a small introduction to the IntrinsicWidth widget On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying up the IntrinsicWidth in your flutter projects. We will show you what the Introduction is?. Show constructor and properties of the IntrinsicWidth. Make a demo program for working IntrinsicWidth and you can likewise pass stepWidth as well as stepHeight contentions to drive the width and additionally the height of the child to be a multiplication of the given values. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---