Flutter Layout Widgets:
In Android whenever we required a layout we writes code in xml file and loads it into the activity or java class. But in flutter we are not using layout xml file instead of this we are using ” WIDGETS ” and widgets are nested or it is also called widget trees. the code we writes in dart language. there is no any external file in flutter.
In Flutter Layout Widgets are Classified into three categories :
- Single-child layout widgets
- Multi-child layout widgets
- Layout helpers
Single-child layout widgets divided into the following categories:
Container Flutter Widget(Container class):
A simple convenience widget that commonly combines painting, positioning, and sizing of the widgets.
In container a child widget is first surrounded by padding (means it decorates border first) and then after it applies additional constraints to the padded extent (like the width and height and margin as constraints, it may be non-null). The container is then surrounded by additional empty space described from the margin.
At the time of painting, the container first applies the given transform, then paints the decoration to fill the padded extent, then it paints the child, and finally paints the foregroundDecoration, also filling the padded extent.
Containers with no children has then it is possible to show as big as possible unless it is restricted by padding, If we apply padding then it is possible to show as small as possible.
In Container with no children then we customize according to our requirement. here we show the widget to device width also. we mayalign it any where within the device width.
Padding Flutter Widget(Padding class):
Padding is used to create empty space around the child widget or Padding is also used to decrease the child widget size. when it is applied to the child widget it reflects all the changes. causing the child to layout at a smaller size.
There is no any difference between these two Padding and container. To the Container if we supply Container.padding then it builds then container class builds padding widget for you.
The sample code is given below:
Padding(
padding: EdgeInsets.all(8.0),
child: const Card(child: Text('Hello World!')),
)
Flutter Center Widget(Center class):
Center class widget or Center widget which centers its child widget within itself. We will show this center widget as big as possible if its dimensions are constrained and its widthFactor and heightFactor are null. If a dimension is not constrained and the corresponding size factor set as null then the widget will match its child widget size in that dimension.
Flutter Align Widget( Align Class):
A widget that aligns its child within itself at different places and different sizes itself based on the child’s size. For example, to align a box at the bottom right, bottom left, top right etc.We will align the child widget with an alignment.
for example. see below sample code:
Alignment.bottomRight
Flutter FittedBox Widget (FittedBox Class):
By using FittedBox widget the child widget itself adjusts its position within it to fix according to its size.
Flutter AspectRatio Widget (AspectRatio class ):
This widget first tries the largest width permitted by the layout constraints. The widget height is determined by applying the given aspect ratio to the width, expressed as a ratio of width to height.
Now consider a second example, an aspect ratio of 2.0 and layout constraints that needs the width to be between 0.0 and 100.0 and the height to be between 0.0 and 100.0. Here we will select a width of 100.0 (the biggest or largest that allowed) and here we are taking height of 50.0 (we are taking this values to match the aspect ratio) that we have taken is 2.0.
ConstrainedBox Flutter Widget (ConstrainedBox class):
For example, if you wanted to restrict child widget to have a minimum height of 50.0 logical pixels, then you could use const BoxConstraints(minHeight: 50.0) as the constraints.
See the sample code given below:
ConstrainedBox(
constraints: const BoxConstraints.expand(),
child: const Card(child: Text('Hello World!')),
)
Flutter Baseline Widget (Baseline class):
This widget puts the child down such that the child’s baseline is baseline logical pixels below the top of this box, then sizes this box to contain the child. If the baseline is less than the distance from the top of the child to the baseline of the child, this widget pushes the child widget towards the bottom or away from the top when it is used.
FractionallySizedBox Flutter Widget (FractionallySizedBox class):
A FractionallySizedBox widget that sizes its child widget to a fraction of the total available space.
IntrinsicHeight Flutter Widget (IntrinsicHeight class ):
IntrinsicHeight Widget that sizes its child to the child’s intrinsic height. This class is useful, when unlimited height is available and you would like a child that would otherwise attempt to expand infinitely to instead size itself to a more reasonable height. This class is relatively expensive and avoid using it if possible.
Flutter IntrinsicWidth widget(IntrinsicWidth class):
A widget that sizes its child to the child widgets intrinsic width. This class is useful, when unlimited width is available and you would like a child widget that would attempt to expand infinitely to instead size itself to a more reasonable width. This class is relatively expensive, it adds a speculative layout and avoids using it if possible.
LimitedBox Flutter Widget(LimitedBox class):
A box that limits its size only when it’s not constrained. This widget gives the child a natural dimension in unbounded environments. For example, by providing a maxHeight to a widget that normally tries to be as big as possible, the widget will normally size itself to fit its parent, but if it is placed in a vertical list, then it will take on the given height.
By using this widget we will restrict its child widget maxheight and maxwidth.If the widget’s maximum width is unconstrained then its child’s width is limited to maxWidth. Similarly, if this widget’s maximum height is unconstrained then its child’s height is limited to maxHeight. This widget is useful when creating the widgets that normally try to match their parents’ size.
Offstage Flutter widget(Offstage class):
Offstage widget can be used to measure the dimensions of a widget without bringing it on the screen. If you want to hide a widget from view when it is not needed, then try to remove the widget from the tree entirely rather than keeping it alive in an Offstage subtree.
OverflowBox flutter Widget(OverflowBox class):
This widget imposes different constraints on its child than it gets from its parent, possibly it allows the child to overflow the parent.
SizedBox Flutter widget(SizedBox class):
A box that uses specified size. If a child is given ,then this widget forces its child to have a specific width and/or height. If either the width or height is null, then this widget will size itself to match the child’s size in that dimension.
If child is not given ,then this widget will size itself to the given width and height, by treating nulls as zero.
Below is sample code is given for Sizedbox:
SizedBox(
width: 200.0,
height: 300.0,
child: const Card(child: Text('Hello World!')),
)
SizedOverflowBox Flutter Widget(SizedOverflowBox class):
A widget that has a specific size but passes its original constraints through to its child, which may then overflow.
Transform Flutter Widget(Transform class):
A widget that applies a transformation before designing its child.
Sample code:
Container(
color: Colors.black,
child: Transform(
alignment: Alignment.topRight,
transform: Matrix4.skewY(0.3)..rotateZ(-math.pi / 12.0),
child: Container(
padding: const EdgeInsets.all(8.0),
color: const Color(0xFFE8581C),
child: const Text('Apartment for rent!'),
),
),
)
Flutter CustomSingleChildLayout Widget(CustomSingleChildLayout class):
A widget that defers the layout of its single child to a delegate. The delegate that can determine the layout constraints for the child and can decide where to place the child widget. The delegate can also determine the size of the parent, but the size of the parent cannot depend on the size of the child.
Multi-child layout Flutter widgets :
Flutter RowWidget (Row class):
A Row widget is used to display its children in a horizontal array. a row widget will not be scrolled. If you have a line of child widgets and you want them to be scrolled if there is insufficient place then you go for ListView to scroll them.
Below is Sample code given for Row widget: In this sample code the available space is divided into three parts
Row(
children: <Widget>[
Expanded(
child: Text('Deliver features faster', textAlign: TextAlign.center),
),
Expanded(
child: Text('Craft beautiful UIs', textAlign: TextAlign.center),
),
Expanded(
child: FittedBox(
fit: BoxFit.contain, // otherwise the logo will be tiny
child: const FlutterLogo(),
),
),
],
)
Flutter ColumnWidget (Column class):
A Column widget is used to display its children in a vertical array. it allows a child to expand to fill the available vertical space. The Column widget cannot scrolled. If you have a line of widgets and you want them to be able to scroll if there is insufficient space available , then using a ListView for scrolling it.
Sample code
This example uses a column widget to arrange three widgets vertically, the last being made to fill all the remaining space.
Column(
children: <Widget>[
Text('Deliver features faster'),
Text('Craft beautiful UIs'),
Expanded(
child: FittedBox(
fit: BoxFit.contain, // otherwise the logo will be tiny
child: const FlutterLogo(),
),
),
],
)
Stack Flutter Widget(Stack class):
A stack widget adjusts its children’s position relative to the edges of its box.
This class is useful if you want to overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the bottom.
To overlap several children widgets or child widgets this class will be helpful. For example text and image overlaped by using gradient and button attached at the bottom of the overlapped child widgets. Each child of a Stack widget is either positioned or non-positioned. Positioned children are wrapped in a Positioned widget that has at least one non-null property. The positioned children are placed relative to the stack according to their top, right, bottom, and left properties. If you want to change the order in which the children paint, you can rebuild the stack with the children in the new order.
IndexedStack Flutter Widget(IndexedStack class):
A Stack that shows a single child from a list of children. The displayed child is the one with the given index. The stack is always as big as the largest child. nothing is displayed when the value is null.
GridView Flutter widget(GridView class):
A scrollable, 2D array of widgets are called GridViewWidget. The main axis direction of a grid is the direction in which it scrolls. the scrolling is its direction.
The most commonly used grid layouts are GridView.count, which creates a layout with a fixed number of tiles in the cross axis, and GridView.extent, creates a layout with tiles that have a maximum cross-axis extent. To create a grid with a large (or infinite) number of children, use the GridView.builder constructor.
Sample code
Here are two brief snippets showing a GridView and its equivalent using CustomScrollView:
GridView.count(
primary: false,
padding: const EdgeInsets.all(20.0),
crossAxisSpacing: 10.0,
crossAxisCount: 2,
children: <Widget>[
const Text('He\'d have you all unravel at the'),
const Text('Heed not the rabble'),
const Text('Sound of screams but the'),
const Text('Who scream'),
const Text('Revolution is coming...'),
const Text('Revolution, they...'),
],
)
A GridView is basically a CustomScrollView with a single SliverGrid in its CustomScrollView.slivers property.
CustomScrollView(
primary: false,
slivers: <Widget>[
SliverPadding(
padding: const EdgeInsets.all(20.0),
sliver: SliverGrid.count(
crossAxisSpacing: 10.0,
crossAxisCount: 2,
children: <Widget>[
const Text('He\'d have you all unravel at the'),
const Text('Heed not the rabble'),
const Text('Sound of screams but the'),
const Text('Who scream'),
const Text('Revolution is coming...'),
const Text('Revolution, they...'),
],
),
),
],
)
Flow Flutter Widget(Flow class):
A widget that sizes and positions children efficiently, according to the logic in a FlowDelegate. By using FlowDelegate logic this widget sizes and positions its child widget efficiently. Flow layouts are optimized for repositioning the children by using transformation matrices. The flow container is sized independently from the children by using this delegate function FlowDelegate.getSize. the children are positioned using transformation matrices during the paint phase using the matrices from the FlowDelegate.paintChildren function. The children can be repositioned efficiently by simply repainting the flow, which happens without the children being laid out again.
Flutter Table Widget(Table class):
This widget uses the table layout algorithm for its children. If there is only one row, then the Row widget is more prefered. If there is only one column, then the SliverList or Column widgets will be more prefered. Rows size vertically decided based on their contents. The column widths, will be controlled by using columnWidths property.
Flutter WrapWidget(Wrap class):
A Wrap lays out each child and attempts to place the child adjacent to the previous child in the main axis, in the given direction, leaving space in between them. If there is not enough space to fit the child then the Wrap creates a new run adjacent to the existing children in the cross axis.
Sample code :
This example takes some Chips by representing four contacts in a Wrap so that they flow acrosses the lines if it is necessary.
Wrap(
spacing: 8.0, // gap between adjacent chips
runSpacing: 4.0, // gap between lines
children: <Widget>[
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('AH')),
label: Text('Hamilton'),
),
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('ML')),
label: Text('Lafayette'),
),
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('HM')),
label: Text('Mulligan'),
),
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('JL')),
label: Text('Laurens'),
),
],
)
ListBody Flutter Widget(ListBody class):
A widget that arranges its children sequentially in a given axis, forcing them to the dimension of the parent in the other axis. This widget is rarely used directly. Instead, use ListView, which combines a similar layout algorithm along with scrolling behavior, or Column, which gives more flexible control over the layout of a vertical set of boxes.
Flutter ListView Widget(ListView class) OR List View Flutter Widget:
A list of scrollable widgets are arranged linearly. ListView is most commonly used for scrolling widget. It displays its children one by one in the scrolled direction. In the cross axis, the children are required to fill the list in ListView.
Flutter CustomMultiChildLayout Widget(CustomMultiChildLayout class):
A widget uses a delegate to size and position multiple children. The delegate determine the layout constraints for each of the child and also decides where to position each child. The delegate also determine the size of the parent, but the size of the parent cannot depend on the sizes of the children. To control the layout of a single child, CustomSingleChildLayout is more prefered. CustomMultiChildLayout is appropriate and prefer to use complex relationships between the size and positioning of a multiple widgets.
Flutter LayoutBuilder Widget( LayoutBuilder class):
LayoutBuilder Builds a layout widget tree that will depend on the parent widget’s size. Similar to the Builder widget , Builder, which calls a builder function at build time except that the framework calls the builder function at layout time and it provides the parent widget’s constraints. it is helpful when the parent constrains the child’s size and doesn’t depend on the child’s widgets intrinsic size. The LayoutBuilder’s final size will match its child’s widgets size. If the child should be smaller than the parent, consider wrapping the child in an Align widget. If you want the child widget will be bigger, then wrap it in a SingleChildScrollView.