Flutter – BoxConstraints Widget
Last Updated :
26 Sep, 2022
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,
Constructor of BoxConstraints:
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}
)
Constructor of BoxConstraints.expand :
It paints a box which expands to fill its parent BoxConstraints widget.
const BoxConstraints.expand(
{double? width,
double? height}
)
Constructor of BoxConstraints.loose:
It created a box which does not grow beyond the mentioned size.
BoxConstraints.loose(
Size size
)
Constructor of BoxConstraints.tight:
It will create a box which does not change its size.
BoxConstraints.tight(
Size size
)
Constructor of BoxConstraints.tightfor:
It will paint a box on the screen with by just mentioning its height and width.
const BoxConstraints.tightFor(
{double? width,
double? height}
)
Constructor of BoxConstraints.tightForFinite:
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}
)
Properties of BoxConstraints widget:
- biggest: This property takes in Size class as the object to specify the biggest the box can get.
- flipped: The flipped property takes in BoxConstraints 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';
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
backgroundColor: Colors.greenAccent[400],
centerTitle: true,
),
body: Center(
child: Container(
color: Colors.green,
padding: EdgeInsets.all(20),
child: Text(
'GfG',
style: TextStyle(color: Colors.white, fontSize: 20),
),
constraints: BoxConstraints(
minHeight: 50,
minWidth: 50,
maxHeight: 80,
maxWidth: 80),
),
),
),
),
);
}
|
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';
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
backgroundColor: Colors.greenAccent[400],
centerTitle: true,
),
body: Center(
child: Container(
color: Colors.green,
padding: EdgeInsets.all(20),
constraints: BoxConstraints(
minHeight: 50,
minWidth: 50,
maxHeight: 80,
maxWidth: 80),
child: Container(
color: Colors.greenAccent[400],
child: Text(
'GfG',
style: TextStyle(color: Colors.white, fontSize: 20),
),
constraints: BoxConstraints.expand(height: 50, width: 50),
)),
),
),
),
);
}
|
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.
Similar Reads
Flutter - BoxDecoration Widget
BoxDecoration is a build-in widget in flutter API. At a bare basic level, it describes how a box should be painted on the screen. The shape of the box needs not to be just a rectangle or a square it can circle also. It comes with a ton of properties we can add an image inside, add a radius to the bo
3 min read
Flutter - ConstrainedBox Widget
ConstrainedBox is a built-in widget in flutter SDK. Its function is to add size constraints to its child widgets. It comes quite handy if we want a container or image to not exceed a certain height and width. It is also good to keep text in a wrapped layout by making the Text widget a child on Const
2 min read
Flutter - BoxShadow Widget
BoxShadow is a built-in widget in flutter, whose functionality is to cast shadow to a box. The BoxShadow widget is usually used with BoxDecoration. In BoxDecoration widget one of its parameters is boxShadow which takes a list of BoxShadow to cast a shadow around a box. Constructor of BoxShadow Class
3 min read
Flutter - BorderRadius Widget
BorderRadius is a built-in widget in flutter. Its main functionality is to add a curve around the border-corner of a widget. There are in total of five ways in which we can use this widget, the first is by using BorderRadius.all, the radius for all the corners are the same here. The second way is by
5 min read
Flutter - AbsorbPointer Widget
AbsorbPointer is a built-in widget in flutter which absorbs pointer, in other words, it prevents its subtree from being clicked, tapped, scrolled, dragged, and responding to hover. In flutter, most widgets already come with an option to disable them for example in a RaisedButton we can set the onCli
4 min read
Flutter - AnimatedContainer Widget
In Flutter a container is a simple widget with well-defined properties like height, width, and color, etc. The AnimatedContainer widget is a simple container widget with animations. These types of widgets can be animated by altering the values of their properties which are the same as the Container
3 min read
Center widget in Flutter
Center widget comes built-in with flutter, it aligns its child widget to the center of the available space on the screen. The size of this widget will be as big as possible if the widthFactor and heightFactor properties are set to null and the dimensions are constrained. And in case the dimensions a
2 min read
Flutter - Banner Widget
Banner widget comes built-in with flutter API. It is somewhat similar to the debug banner that we are used to seeing on the top-right corner on a flutter app in debug mode. It enables us to show a message or text on top of any other widget. Below we will see its implementation with the help of an ex
3 min read
Flutter - Border Widget
Border widget in flutter is assigned a simple functionality to add borders to the other widgets. The first is by creating all borders using BorderSide. The second way is by using Border.all to create a uniform border having the same color and width. The third is by using Border.fromBorderSide to cre
4 min read
Flutter - Card Widget
Card is a built-in widget in Flutter which derives its design from Google's Material Design Library. The functionality of this widget on screen is, that it is a bland space or panel with round corners and a slight elevation on the lower side. It comes with many properties like color, shape, shadow c
4 min read