Flutter Layouts
In flutter layout are the widgets which are used for setting the arrangement of UI. As we know everything is a widget in flutter. Here, some basic layout widgets which we don’t see on UI are Rows, Columns,grids,ListViews these can be used to arrange and constraint the date widgets on the screen.
Flutter allows creation of a layout by nesting multiple layout widgets to create a complex widget. For example, you can see the below image.
The code used for this image:
Container(
width: MediaQuery.of(context).size.width * 0.9,
height: MediaQuery.of(context).size.height * 0.15,
decoration: BoxDecoration(
border: Border.all(color: Colors.amber),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.call,
color: Colors.blue,
),
Container(
child: Text(
"Call",
style: TextStyle(color: Colors.orange),
),
),
],
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.message,
color: Colors.blue,
),
Container(
child: Text(
"Message",
style: TextStyle(color: Colors.orange),
),
),
],
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.share,
color: Colors.blue,
),
Container(
child: Text(
"Share",
style: TextStyle(color: Colors.orange),
),
),
],
),
],
),
),
From the above code we can say the container is the widget which allows us to customize its child widget. Here we have given height and width and a border of amber color to the layout. Here, we added the container as a parent to text widget to add margin.
Layout a widget
Let us learn how to create and display a widget in flutter. The following are the steps to layout a widget:
Step 1: First, Select the general layout.
Step 2: Next, Select the Visible widgets
Step 3: Then, add the visible widgets to the layout.
Step 4: Finally, add the layout on the page where you want to display the visible widgets.
Types of Layout Widgets
We can divide layout widgets into two types:
- Single Child
- Multiple Children
Single Child
The single child layout widget are the widgets, on which we can add only one child inside the parent layout. These widgets can also be used for decorating the child widgets like add padding,aligning, etc.There are many single child widgets to add to the app UI and make it attractive. Some example of single child widgets are:
Container: Container is the most popular widget available it is used for adding margin, padding, decorating the child.
Container(
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(width: 2),
),
child: Text('Hello World'),
),
Padding: This is the widget we use when we need to add padding only. We can use EdgeInsets for all the sides or only some sides.
Padding(
padding: EdgeInsets.all(10),
child: Text('Hello World'),
),
Center: This widget is used when we want to put the child widget in the center.
Align: This widget aligns its child widget within itself and sizes it based on the child’s size. It provides more control to adjust the placement of the child widget in the exact position where you need it.
Center(
child: Container(
height: 200,
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(width: 2),
),
child: Align(
alignment: Alignment.bottomRight, child: Text('Hello World')),
),
),
SizedBox: This widget is used when you only want to add size to the widget.
Center(
child: SizedBox(
height: 200,
child: Align(
alignment: Alignment.bottomRight, child: Text('Hello World')),
),
),
AspectRatio: When you want to add an aspect ratio you can add This widget.
AspectRatio(
aspectRatio: 6 / 2,
child: Container(
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(width: 2),
),
child: Align(
alignment: Alignment.bottomRight, child: Text('Hello World')),
),
),
Baseline: This widget shifts the child widget according to the child’s baseline.
Baseline(
baseline: 30.0,
baselineType: TextBaseline.alphabetic,
child: Container(
child: Align(
alignment: Alignment.bottomRight, child: Text('Hello World')),
),
),
ConstrainedBox: This widget allows us to force additional constraints on its child. Which means we can force the child to have a specific constraint without changing the properties of the child.
ConstrainedBox(
constraints: new BoxConstraints(
minHeight: 150.0,
minWidth: 150.0,
maxHeight: 300.0,
maxWidth: 300.0,
),
child: new DecoratedBox(
decoration: new BoxDecoration(color: Colors.red),
),
),
FittedBox: It scales and positions the child widget according to the specified fit.
FittedBox(
child: Row(
children: [
Container(
child: Image.asset('assets/images/computer.png'),
),
Container(
child: Text("This is a widget"),
)
],
),
fit: BoxFit.contain,
),
Output
FractionallySizedBox: This widget allows us to size its child widget according to the fraction of the available space.
OverflowBox: This widget allows us to impose different constraints on its child widget than it gets from a parent. This widget allows its child to overflow its parent widget.
Example
Center(
child: Container(
height: 50.0,
width: 50.0,
color: Colors.red,
child: OverflowBox(
minHeight: 70.0,
minWidth: 70.0,
child: Container(
height: 50.0,
width: 50.0,
color: Colors.blue,
),
),
),
),
Output
Center(
child: Container(
height: 50.0,
width: 50.0,
color: Colors.red,
child: OverflowBox(
minHeight: 70.0,
minWidth: 70.0,
child: Container(
height: 50.0,
width: 50.0,
color: Colors.blue,
),
),
),
),
Output
Multiple Child widgets
These widgets are the widgets which help us add multiple widgets inside, and the layout of these widgets are unique. For example, Row widget is used for laying out its children in horizontal direction, and Column widget is used for laying out its children in Vertical direction. We can combine rows and columns or other layouts to create custom layout.
Here, some of the multi child widgets are:
Row: Row to arrange children widgets in a horizontal direction.
Column: Column to arrange children widgets in a vertical direction.
ListView: ListView is used for adding scroll directly to the children.
GridView: GridView is the view which will be used to arrange the widgets in a grid pattern.
Expanded: This is used the widgets to use the maximum available size in a row or column.
Table: Used for creating a table of widgets.
Stack: Stack is used for overlapping multiple children. This allows creating layers.
Building Complex Layout
In this section, we are going to discuss how to create complex user interfaces using both single and multiple child layout. The layout framework allows us to create a complex UI layout by nesting the rows and columns in ListView.
This is an example of a complex UI by creating the product list app.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
final products = [
{
'name': 'Laptop',
'description': 'Laptop Computer',
'price': 1000,
'image': 'assets/images/laptop.png'
},
{
'name': 'PC',
'description': 'Computer',
'price': 500,
'image': 'assets/images/computer.png'
},
{
'name': 'Smart Phone',
'description': 'Smart Phone',
'price': 100,
'image': 'assets/images/smartphone.png'
},
{
'name': 'Tablet',
'description': 'Tablet',
'price': 500,
'image': 'assets/images/tablet.png'
},
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(this.title),
),
body: Container(
child: ListView(
children: products
.map((e) => Container(
padding: EdgeInsets.all(2),
height: 100,
child: Card(
child: Row(
children: [
Expanded(
flex: 3,
child: Image.asset(e['image']),
),
Expanded(
flex: 12,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(e['name'],
style:
TextStyle(fontWeight: FontWeight.bold)),
Text(e['description']),
Text("Price: " + e['price'].toString()),
],
),
),
],
),
),)).toList(),
),
),
);
}
}
In the above code, we created a list with the map of product details, such as image, name, price, and description. In ListView you are expanding the map as shown below:
Output
