Flutter – BoxConstraints Widget

09 Aug, 2021
BoxConstraints is a built-in widget in flutter SDK. Its functionality is to add sized constraints on its child widget. It is usually taken as the object of constraints property in ConstrainedBox widget. It comes packed with many properties for customization. Below we will see all its properties with and an example,
 It paints a box with the mentioned constraints.
const BoxConstraints(
{double minWidth: 0.0,
double maxWidth: double.infinity,
double minHeight: 0.0,
double maxHeight: double.infinity}
)
It paints a box which expands to fill its parent BoxConstriants widget.
const BoxConstraints.expand(
{double? width,
double? height}
)
It created a box which does not grow beyond the mentioned size. 
BoxConstraints.loose(
Size size
)
 It will create a box which does not change its size.
BoxConstraints.tight(
Size size
)
 It will paint a box on the screen with by just mentioning its height and width.
const BoxConstraints.tightFor(
{double? width,
double? height}
)
 Here we get a box whose height and width is set to infinity if not mentioned.
const BoxConstraints.tightForFinite(
{double width: double.infinity,
double height: double.infinity}
)
biggest: This property takes in Size class as the object to specify the biggest the box can get.
flipped: The flipped property takes in BoxConstriants class as the object to flip the height and width properties of the widget.
hasBoundedHeight: This property takes in a boolean as the object to specify whether the maxHeight had an upper limit.
hasBoundedWidth: This property takes in a boolean as the object to specify whether the maxWidth had an upper limit.
hasInfiniteHeight: This property also takes in a boolean as the object to determine whether the box has infinite height.
hasInfiniteWidth: This property also takes in a boolean as the object to determine whether the box has infinite width.
hasTightHeight: This property determines whether the box height will be fixed to only one value or not by taking in a boolean as the object.
hasTightWidth: This property determines whether the box width will be fixed to only one value or not by taking in a boolean as the object
isNormalized: It also takes in a boolean value as the object to specify if the maximum and minimum height and width will be same ort not.
isTight: The isTight property also takes in a boolean as the object to determine whether the box constraints will be fixed to only one height and width or not.
maxHeight: This property takes in a double value as the object to control the maximum height the box can get to.
maxWith: This property takes in a double value as the object to control the maximum width box will get to.
minHeight: This property takes in a double value as the object to control the minimum height box will get to.
minWidth: This property takes in a double value as the object to control the minimum width box will get to.
smallest: This property controls the smallest size the box can achieve by taking in Size class as the object.
Example 1:
Dart
import 'package:flutter/material.dart';  //Material design libraryvoid main() {  runApp(    //widget tree starts here    MaterialApp(      home: Scaffold(        appBar: AppBar(          title: Text('GeeksforGeeks'),          backgroundColor: Colors.greenAccent[400],          centerTitle: true,        ), //AppBar        body: Center(          child: Container(            color: Colors.green,            padding: EdgeInsets.all(20),            child: Text(              'GfG',              style: TextStyle(color: Colors.white, fontSize: 20),            ), //Text            /** BoxConstraints Widget **/            constraints: BoxConstraints(                minHeight: 50,                minWidth: 50,                maxHeight: 80,                maxWidth: 80), //BoxConstraints          ), //container        ), //Center      ), //Scaffold    ), //MaterialApp  );}
Output:
Explanation: Inside the Container widget which is a child of Center widget (Parent widget in the body) the constraints property is holding BoxConstraints widget. Inside that the minHeight and minWidth are set to 50 px and maxHeight and maxWidth is set to 80 px. The Container is green colored and is holding white colored text. The constraints that are set will not allow the container to have a height and width greater than 80 px and less than 50 px.
 
Example 2:
Dart
import 'package:flutter/material.dart';  //Material design libraryvoid main() {  runApp(    //widget tree starts here    MaterialApp(      home: Scaffold(        appBar: AppBar(          title: Text('GeeksforGeeks'),          backgroundColor: Colors.greenAccent[400],          centerTitle: true,        ), //AppBar        body: Center(          child: Container(              color: Colors.green,              padding: EdgeInsets.all(20),              /** BoxConstraints Widget **/              constraints: BoxConstraints(                  minHeight: 50,                  minWidth: 50,                  maxHeight: 80,                  maxWidth: 80), //BoxConstraints              child: Container(                color: Colors.greenAccent[400],                child: Text(                  'GfG',                  style: TextStyle(color: Colors.white, fontSize: 20),                ), //Text                constraints: BoxConstraints.expand(height: 50, width: 50),              )), //container        ), //Center      ), //Scaffold    ), //MaterialApp  );}
Output:
Explanation: This flutter app is similar to the previous one, except the fact the child widget in the Container which was a Text is replaced by another Container widget. The second container is assigned a color of greenAccent[400], and the child is a Text widget. The constraints property in the second container is taking BoxConstraints.expand as the object, with its height and width property set to 50 px each. The BoxConstraints.expands is expanding in its parent BoxConstraints to a height and width of 50 px. And because of the fact it expands, it always starts from the center.
sagartomar9927
Flutter-widgets
Android
Dart
Flutter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Add Views Dynamically and Store Data in Arraylist in Android?
Android SDK and it's Components
Flutter - Custom Bottom Navigation Bar
How to Communicate Between Fragments in Android?
Retrofit with Kotlin Coroutine in Android
Flutter - DropDownButton Widget
Listview.builder in Flutter
Flutter - Custom Bottom Navigation Bar
Splash Screen in Flutter
Flutter - Asset Image