Box Utilities
width
Sets the width of the box.
width(200)
height
Sets the height of the box.
height(100)
padding
Sets the padding of the box.
padding(10);
padding(10, 20);
padding(10, 20, 30);
padding(10, 20, 30, 40);
padding.all
Sets the padding of the box on all sides.
padding.all(10)
padding.top
Sets the padding of the box on the top side.
padding.top(10)
padding.bottom
Sets the padding of the box on the bottom side.
padding.bottom(10)
padding.left
Sets the padding of the box on the left side.
padding.left(10)
padding.right
Sets the padding of the box on the right side.
padding.right(10)
padding.horizontal
Sets the padding of the box on the horizontal (left and right) sides.
padding.horizontal(10)
padding.vertical
Sets the padding of the box on the vertical (top and bottom) sides.
padding.vertical(10)
padding.only
Sets the padding of the box on the specified sides.
padding.only(
top: 10,
bottom: 20,
left: 30,
right: 40
);
Constraints
maxWidth
Sets the maximum width the box can have.
maxWidth(200)
minWidth
Sets the minimum width the box must have.
minWidth(100)
maxHeight
Sets the maximum height the box can have.
maxHeight(200)
minHeight
Sets the minimum height the box must have.
minHeight(100)
backgroundColor
Sets the background color of the box.
backgroundColor(Colors.blue)
backgroundColor.blue()
elevation
Sets the elevation of the box.
// Elevation can be 0, 1, 2, 3, 4, 6, 8, 9, 12, 16, 24
elevation(2)
alignment
Sets the alignment of the box.
// You can pass the alignment into the utility
alignment(Alignment.center);
// Or you can use the alignment utility
alignment.center();
alignment.centerLeft();
alignment.centerRight();
alignment.topLeft();
alignment.topCenter();
alignment.topRight();
alignment.bottomLeft();
alignment.bottomCenter();
alignment.bottomRight();
clipBehavior
Sets the clip behavior of the box.
// You can pass the clip into the utility
clipBehavior(Clip.hardEdge)
clipBehavior.none();
clipBehavior.hardEdge();
clipBehavior.antiAlias();
clipBehavior.antiAliasWithSaveLayer();
Decoration
border
Defines the border of a Box. Equivalent to BoxDecoration.border
, in a Container
call()
Styles all sides of Border
.
border(
color: Colors.red,
width: 2,
style: BorderStyle.solid,
strokeAlign: 0.5
);
border.all
Styles all sides of Border
.
border.all.color.red();
border.all.width(2);
border.all.style.solid();
border.all.strokeAlign(0.5);
border.top
Styles the top side of Border
.
border.top.color.red();
border.top.width(2);
border.top.style.solid();
border.top.strokeAlign(0.5);
border.bottom
Styles the bottom side of Border
.
border.bottom.color.red();
border.bottom.width(2);
border.bottom.style.solid();
border.bottom.strokeAlign(0.5);
border.left
Styles the left side of Border
.
border.left.color.red();
border.left.width(2);
border.left.style.solid();
border.left.strokeAlign(0.5);
border.right
Styles the right sideBorder
.
border.right.color.red();
border.right.width(2);
border.right.style.solid();
border.right.strokeAlign(0.5);
border.start
Styles the start side of BorderDirectional
.
border.start.color.red();
border.start.width(2);
border.start.style.solid();
border.start.strokeAlign(0.5);
border.end
Styles the end side of BorderDirectional
.
border.end.color.red();
border.end.width(2);
border.end.style.solid();
border.end.strokeAlign(0.5);
border.horizontal
Styles the horizontal (top and bottom) sides of Border
.
border.horizontal.color.red();
border.horizontal.width(2);
border.horizontal.style.solid();
border.horizontal.strokeAlign(0.5);
border.vertical
Styles the vertical (left and right) sides of Border
.
border.vertical.color.red();
border.vertical.width(2);
border.vertical.style.solid();
border.vertical.strokeAlign(0.5);
borderDirectional
Defines the BorderDirectional
of a Box. Equivalent to BoxDecoration.border
, in a Container
call()
Styles all sides of BorderDirectional
.
borderDirectional(
color: Colors.red,
width: 2,
style: BorderStyle.solid,
strokeAlign: 0.5
);
borderDirectional.all
Styles all sides of BorderDirectional
.
borderDirectional.all.color.red();
borderDirectional.all.width(2);
borderDirectional.all.style.solid();
borderDirectional.all.strokeAlign(0.5);
borderDirectional.top
Styles the top side BorderDirectional
.
borderDirectional.top.color.red();
borderDirectional.top.width(2);
borderDirectional.top.style.solid();
borderDirectional.top.strokeAlign(0.5);
borderDirectional.bottom
Styles the bottom side of BorderDirectional
.
borderDirectional.bottom.color.red();
borderDirectional.bottom.width(2);
borderDirectional.bottom.style.solid();
borderDirectional.bottom.strokeAlign(0.5);
borderDirectional.start
Styles the start side of BorderDirectional
.
borderDirectional.start.color.red();
borderDirectional.start.width(2);
borderDirectional.start.style.solid();
borderDirectional.start.strokeAlign(0.5);
borderDirectional.end
Styles the end side of BorderDirectional
.
borderDirectional.end.color.red();
borderDirectional.end.width(2);
borderDirectional.end.style.solid();
borderDirectional.end.strokeAlign(0.5);
borderDirectional.horizontal
Styles the horizontal (start and end) sides of BorderDirectional
.
borderDirectional.horizontal.color.red();
borderDirectional.horizontal.width(2);
borderDirectional.horizontal.style.solid();
borderDirectional.horizontal.strokeAlign(0.5);
borderDirectional.vertical
Styles the vertical (top and bottom) sides of BorderDirectional
.
borderDirectional.vertical.color.red();
borderDirectional.vertical.width(2);
borderDirectional.vertical.style.solid();
borderDirectional.vertical.strokeAlign(0.5);
borderRadius
Styles Radius
the corners of a BorderRadiusGeometry
of a BoxDecoration.borderRadius
.
// BorderRadius all: Radius.circular(10)
borderRadius(10);
// BorderRadius topLeft and topRight: Radius.circular(10), bottomLeft and bottomRight: Radius.circular(20)
borderRadius(10, 20);
// BorderRadius topLeft: Radius.circular(10), topRight and bottomLeft: Radius.circular(20), bottomRight: Radius.circular(30)
borderRadius(10, 20, 30);
// BorderRadius topLeft: Radius.circular(10), topRight: Radius.circular(20), bottomLeft: Radius.circular(30), bottomRight: Radius.circular(40)
borderRadius(10, 20, 30, 40);
/// BorderRadius all: Radius.circular(10)
borderRadius.circular(10);
/// BorderRadius all: Radius.elliptical(10, 20)
borderRadius.elliptical(10, 20);
/// BorderRadius all: Radius.zero
borderRadius.zero();
borderRadius.all
Styles a uniform BorderRadius
of a BoxDecoration.borderRadius
.
borderRadius.all(10);
borderRadius.all.circular(10);
borderRadius.all.elliptical(10, 20);
borderRadius.all.zero();
borderRadius.topLeft
Styles the topLeft BorderRadius
of a BoxDecoration.borderRadius
.
borderRadius.topLeft(10);
borderRadius.topLeft.circular(10);
borderRadius.topLeft.elliptical(10, 20);
borderRadius.topLeft.zero();
borderRadius.topRight
Styles the topRight BorderRadius
of a BoxDecoration.borderRadius
.
borderRadius.topRight(10);
borderRadius.topRight.circular(10);
borderRadius.topRight.elliptical(10, 20);
borderRadius.topRight.zero();
borderRadius.bottomLeft
Styles the bottomLeft BorderRadius
of a BoxDecoration.borderRadius
.
borderRadius.bottomLeft(10);
borderRadius.bottomLeft.circular(10);
borderRadius.bottomLeft.elliptical(10, 20);
borderRadius.bottomLeft.zero();
borderRadius.bottomRight
Styles the bottomRight BorderRadius
of a BoxDecoration.borderRadius
.
borderRadius.bottomRight(10);
borderRadius.bottomRight.circular(10);
borderRadius.bottomRight.elliptical(10, 20);
borderRadius.bottomRight.zero();
borderRadius.topStart
Styles the topStart BorderRadiusDirectional
of a BoxDecoration.borderRadius
.
borderRadius.topStart(10);
borderRadius.topStart.circular(10);
borderRadius.topStart.elliptical(10, 20);
borderRadius.topStart.zero();
borderRadius.topEnd
Styles the topEnd BorderRadiusDirectional
of a BoxDecoration.borderRadius
.
borderRadius.topEnd(10);
borderRadius.topEnd.circular(10);
borderRadius.topEnd.elliptical(10, 20);
borderRadius.topEnd.zero();
borderRadius.bottomStart
Styles the bottomStart BorderRadiusDirectional
of a BoxDecoration.borderRadius
.
borderRadius.bottomStart(10);
borderRadius.bottomStart.circular(10);
borderRadius.bottomStart.elliptical(10, 20);
borderRadius.bottomStart.zero();
borderRadius.bottomEnd
Styles the bottomEnd BorderRadiusDirectional
of a BoxDecoration.borderRadius
.
borderRadius.bottomEnd(10);
borderRadius.bottomEnd.circular(10);
borderRadius.bottomEnd.elliptical(10, 20);
borderRadius.bottomEnd.zero();
borderRadius.top
Styles the top (topLeft and topRight) BorderRadius
of a BoxDecoration.borderRadius
.
borderRadius.top(10);
borderRadius.top.circular(10);
borderRadius.top.elliptical(10, 20);
borderRadius.top.zero();
borderRadius.bottom
Styles the bottom (bottomLeft and bottomRight) BorderRadius
of a BoxDecoration.borderRadius
.
borderRadius.bottom(10);
borderRadius.bottom.circular(10);
borderRadius.bottom.elliptical(10, 20);
borderRadius.bottom.zero();
borderRadius.left
Styles the left (topLeft and bottomLeft) BorderRadius
of a BoxDecoration.borderRadius
.
border.left(10);
borderRadius.left.circular(10);
borderRadius.left.elliptical(10, 20);
borderRadius.left.zero();
borderRadius.right
Styles the right (topRight and bottomRight) BorderRadius
of a BoxDecoration.borderRadius
.
border.right(10);
borderRadius.right.circular(10);
borderRadius.right.elliptical(10, 20);
borderRadius.right.zero();
borderRadius.only
The same as calling BorderRadius.only
of a BoxDecoration.borderRadius
.
borderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(20),
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(40)
);
borderRadiusDirectional
Styles the BorderRadiusDirectional
of a BoxDecoration.borderRadius
.
// BorderRadiusDirectional.all(Radius.circular(10));
borderRadiusDirectional(10);
// BorderRadiusDirectional.only(topStart: Radius.circular(10), topEnd: Radius.circular(20), bottomStart: Radius.circular(10), bottomEnd: Radius.circular(20));
borderRadiusDirectional(10, 20);
// Applies 10 to topStart, 20 to topEnd and bottomStart, 30 to bottomEnd
// BorderRadiusDirectional.only(topStart: Radius.circular(10), topEnd: Radius.circular(20), bottomStart: Radius.circular(30), bottomEnd: Radius.circular(20));
borderRadiusDirectional(10, 20, 30);
// BorderRadiusDirectional.only(topStart: Radius.circular(10), topEnd: Radius.circular(20), bottomStart: Radius.circular(30), bottomEnd: Radius.circular(40));
borderRadiusDirectional(10, 20, 30, 40);
borderRadiusDirectional.circular(10);
borderRadiusDirectional.elliptical(10, 20);
borderRadiusDirectional.zero();
borderRadiusDirectional.all
Styles the BorderRadiusDirectional.all
of a BoxDecoration.borderRadius
.
borderRadiusDirectional.all(10);
borderRadiusDirectional.all.circular(10);
borderRadiusDirectional.all.elliptical(10, 20);
borderRadiusDirectional.all.zero();
borderRadiusDirectional.topStart
Styles the BorderRadiusDirectional.topStart
of a BoxDecoration.borderRadius
.
borderRadiusDirectional.topStart(10);
borderRadiusDirectional.topStart.circular(10);
borderRadiusDirectional.topStart.elliptical(10, 20);
borderRadiusDirectional.topStart.zero();
borderRadiusDirectional.topEnd
Styles the BorderRadiusDirectional.topEnd
of a BoxDecoration.borderRadius
.
borderRadiusDirectional.topEnd(10);
borderRadiusDirectional.topEnd.circular(10);
borderRadiusDirectional.topEnd.elliptical(10, 20);
borderRadiusDirectional.topEnd.zero();
borderRadiusDirectional.bottomStart
Styles the BorderRadiusDirectional.bottomStart
of a BoxDecoration.borderRadius
.
borderRadiusDirectional.bottomStart(10);
borderRadiusDirectional.bottomStart.circular(10);
borderRadiusDirectional.bottomStart.elliptical(10, 20);
borderRadiusDirectional.bottomStart.zero();
borderRadiusDirectional.bottomEnd
Styles the BorderRadiusDirectional.bottomEnd
of a BoxDecoration.borderRadius
.
borderRadiusDirectional.bottomEnd(10);
borderRadiusDirectional.bottomEnd.circular(10);
borderRadiusDirectional.bottomEnd.elliptical(10, 20);
borderRadiusDirectional.bottomEnd.zero();
borderRadiusDirectional.top
Styles the (topStart and topEnd) of a BoxDecoration.borderRadius
.
borderRadiusDirectional.top(10);
borderRadiusDirectional.top.circular(10);
borderRadiusDirectional.top.elliptical(10, 20);
borderRadiusDirectional.top.zero();
borderRadiusDirectional.bottom
Styles the (bottomStart and bottomEnd) of a BoxDecoration.borderRadius
.
borderRadiusDirectional.bottom(10);
borderRadiusDirectional.bottom.circular(10);
borderRadiusDirectional.bottom.elliptical(10, 20);
borderRadiusDirectional.bottom.zero();
borderRadiusDirectional.start
Styles (topStart and bottomStart) BorderRadiusDirectional
of a BoxDecoration.borderRadius
.
borderRadiusDirectional.start(10);
borderRadiusDirectional.start.circular(10);
borderRadiusDirectional.start.elliptical(10, 20);
borderRadiusDirectional.start.zero();
borderRadiusDirectional.end
Styles (topEnd and bottomEnd) BorderRadiusDirectional
of a BoxDecoration.borderRadius
.
borderRadiusDirectional.end(10);
borderRadiusDirectional.end.circular(10);
borderRadiusDirectional.end.elliptical(10, 20);
borderRadiusDirectional.end.zero();
borderRadiusDirectional.only
Similar to using BorderRadiusDirectional.only
of a BoxDecoration.borderRadius
.
borderRadiusDirectional.only(
topStart: Radius.circular(10),
topEnd: Radius.circular(20),
bottomStart: Radius.circular(10),
bottomEnd: Radius.circular(20)
);