Flutter - Working with Layouts
Last Updated :
16 Sep, 2022
Before talking about Layout in Flutter, there is just one thing to keep in mind that “Everything in Flutter is Widget". Meaning the core of the layout in any Flutter Application is the widget. Putting it simply, all the images, icons, labels and text, etc are technically widgets of different types and layouts. In this article, we will explore the concept of layouts in flutter in detail.
For a better understanding of the concept let's take a single example and break down those components for better understanding.
Fig 1
In the above image, you just saw a layout that is nothing but just a composition of few basic widgets.
Fig 2
Now look at the above image here we just outline the layouts, look closely you can see inside a raw widget there are 3 column widgets and each column contains an icon and a label. Take a look at the below widget tree diagram.
Fig 3
Now look closely fig 2 and fig 03, Parent widget is a row widget, inside that 3rd column widget and in each column, there is an icon and inside the container, there is a text widget.
Now let’s talk about some common layout widgets. The common layout widget can be divided into two categories:
- Standard Widgets
- Material Widgets
Standard Widgets :
Some basic and useful widgets are used in almost all the app in flutter. Standard widgets in flutter are Container, GridView, ListView, Stack.
Container:
The container is the most used widget in flutter. We can add padding, margin, border, and background color-like properties in this widget and we can customize it according to our requirement. It contains only a single widget or child.
Example:
Dart
Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SafeArea(
// Container implementation
child: Container(
height: 100.0,
width: 100.0,
color: Colors.green,
),
)
);
Output:
Here we will define the function that returns a container widget
Dart
// function returning container widget
Widget _buildImageColumn() => Container(
decoration: BoxDecoration(
color: Colors.black12,
),
child: Column(
children: [
Container(
height: 100.0,
width: 50.0,
color: Colors.red,
),
Container(
height: 100.0,
width: 50.0,
color: Colors.yellow,
),
],
),
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: Text(widget.title),
),
// replace this section in your app
body: Center(
child:_buildImageColumn()
));
}
Output:
This is a bit of complex example, just look at the buildImage() there we create a container with background image black which is a parent widget, then we create a column widget which is the child of container, inside the column, we create two containers with different colors, hope you get that.
Grid View:
Grid view widget is a two-dimensional scrollable list, by default it provides two pre-fabricated lists, but you can customize it and build your custom grid.
- You can change grid.count property and specify the number of columns.
- gridView.extend allows the maximum pixel width of a tile.
Example:
Dart
// Method returning Grid Widget
Widget _buildGrid() => GridView.extent(
maxCrossAxisExtent: 150,
padding: const EdgeInsets.all(4),
mainAxisSpacing: 4,
crossAxisSpacing: 4,
children: _buildGridTileList(10));
List<Container> _buildGridTileList(int count) => List.generate(
count,
(i) => Container(
width: 100,
height: 100,
color: Colors.blue,
));
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: Text(widget.title),
),
// Replace this section in your app
body: Center(child: _buildGrid()));
}
Output:
Note: Just try to change the max maxCrossAxisExtent value you can figure out what is the use of maxCrossAxisExtent.
List View:
List view is like a column widget, but it has a plus that is it can be scrollable. Listview can be horizontal or vertical. If the contents in the list view are not fitting then it adds scrollable functionality.
Example:
Dart
// function returning List view widget
Widget _buildList() => ListView(
// name is a listTile widget which is defined below
children: [
name('james', 'thomas'),
name('Ajay', 'kumar'),
name('Arun', 'das'),
name('Roxie', 'St'),
name('Stanlee', 'jr'),
name('AMC', 'hales'),
Divider(),
name('Monty',"Chopra"),
name('Emmy', 'Ave'),
name(
'Chaitanya', ' kumar'),
name('Rio', 'St'),
],
);
// name is a function returning ListTile widget
ListTile name(String firstName, String lastName) => ListTile(
title: Text(firstName,
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 20,
)),
subtitle: Text(lastName),
leading: Icon(
Icons.arrow_back_ios,
color: Colors.blue[500],
),
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: Text(widget.title),
),
// replace this section in your app
body: Center(child: _buildList()));
}
Output:
Stack:
Everybody knows the meaning of stack, i.e on top of another. Exactly this widget serve in that way we can put the widget on top of another.
Note: This is not similar to column widget, in column widget the children are in a column fashion
that is one after another not overlapping to each other, but in the stack widget case we can
see the widgets can be overlapped to each other.- The first widget in the list of children is the base widget; subsequent children are overlaid on top of that base widget.
- The stack can not be scrollable.
Example:
Dart
// this function returns a stack widget
Widget _buildStack() => Stack(
alignment: const Alignment(0.6, 0.6),
children: [
Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: Colors.black45,
shape: BoxShape.circle
),
child: Center(
child: Text(
'Mia B',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
),
],
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: Text(widget.title),
),
// replace this section in your app
body: Center(child: _buildStack()));
}
Output:
Card :
A card is from the Material library, It can contain a single child, all the modern app use card in their app. In Flutter, a Card features slightly rounded corners and a drop shadow, giving it a 3D effect. By changing the card elevation property you can control the 3D effect like a drop shadow.
Example:
Dart
// Function returns the SizeBox Widget inside that Card widget is present
Widget _buildCard() => SizedBox(
height: 210,
child: Card(
elevation: 20,
child: Column(
children: [
ListTile(
title: Text('Geeks For Geeks',
style: TextStyle(fontWeight: FontWeight.w500)),
subtitle: Text('log writing'),
leading: Icon(
Icons.restaurant_menu,
color: Colors.blue[500],
),
),
Divider(),
ListTile(
title: Text('Noida, India',
style: TextStyle(fontWeight: FontWeight.w500)),
leading: Icon(
Icons.contact_phone,
color: Colors.blue[500],
),
),
ListTile(
title: Text('[email protected]'),
leading: Icon(
Icons.contact_mail,
color: Colors.blue[500],
),
),
],
),
),
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: Text(widget.title),
),
// Replace this section in your app
body: Center(child: _buildCard()));
}
Output:
Here in this example, we give the elevation 20, you can change that and see the result.
ListTile:
ListTile is also from the material library. For an easy way to create a row containing up to 3 lines of text and optional leading and trailing icons. ListTile is most commonly used in Card or ListView but can be used elsewhere.
Example:
Dart
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: Text(widget.title),
),
body: Container(
child: ListTile(
title: Text('Geeks For Geeks',
style: TextStyle(fontWeight: FontWeight.w500)),
subtitle: Text('log writing'),
leading: Icon(
Icons.restaurant_menu,
color: Colors.blue[500],
),
),
));
}
Output:
Similar Reads
Flutter - Working with Material Button
Buttons are material components that provide the user a single tap facility for taking actions, making choices, submitting forms, saving data, opening a new page, etc. Buttons are triggered when the user taps on them. They are the most commonly used feature provided in almost all Flutter apps. For u
4 min read
Flutter - LayoutBuilder Widget
In Flutter, LayoutBuilder Widget is similar to the Builder widget except that the framework calls the builder function at layout time and provides the parent widget's constraints. This is useful when the parent constrains the child's size and doesn't depend on the child's intrinsic size. The LayoutB
3 min read
Flutter with HTML
Flutter is growing with its libraries and community. Earlier, we could use Machine Learning and Flutter together to create powerful applications. Now, we can combine Flutter and HTML too. If there is a static HTML webpage that we want to render in our application that is built using Flutter. With th
6 min read
Flutter - Wrap Widget
Wrap widget aligns the widgets in a horizontal and vertical manner. Generally, we use Rows and Columns to do that but if we have some widgets which are not able to fit in the Row/Column then it will give us Overflow Message ( for ex: Right Overflowed by 570 pixels). Constructor of Wrap class:Wrap({K
3 min read
Flutter - Positioned Widget
Positioned is a widget that comes built-in with flutter SDK. Positioned does exactly what it sounds like, which is it arbitrarily positioned widgets on top of each other. It is usually used to position child widgets in Stack widget or similar. It only works for Stateless and Stateful widgets. Constr
3 min read
TreeShaking in Flutter
Flutter application are usually characterized with large APK size hence optimising application size has always been a matter of concern for Flutter developers. Flutter follows the mechanism of Treeshaking to reduce the final packet size after compilation of code. Have ever seen a gardener shaking th
3 min read
Flutter Tutorial
This Flutter Tutorial is specifically designed for beginners and experienced professionals. It covers both the basics and advanced concepts of the Flutter framework.Flutter is Google’s mobile SDK that builds native Android and iOS apps from a single codebase. It was developed in December 2017. When
7 min read
What is Widgets in Flutter?
Flutter is Google's UI toolkit for crafting beautiful, natively compiled iOS and Android apps from a single code base. To build any application we start with widgets - The building block of Flutter applications. Widgets describe what their view should look like given their current configuration and
5 min read
Flutter - ListTile Widget
The ListTile widget is used to populate a ListView in Flutter. It contains a title as well as leading or trailing icons. Let's understand this with the help of an example.The Constructor of the ListTile classListTile({ Key key, Widget leading, Widget title, Widget subtitle, Widget trailing, bool isT
4 min read
Flutter - FlutterLogo Widget
FlutterLogo widget is as simple as it sounds, it is just the flutter logo in the form of an icon. This widget also comes built-in with Flutter SDK. This widget can found its use as a placeholder for an image or icon. Below we will see its implementation with all its properties and constructor.Constr
3 min read