Layouts in Flutter
In very easy words, a layout is like a blueprint that helps us arrange and organize different things like text, images, or buttons on a screen. It's like deciding where everything should go so that our application is both easy to build and is more organized.
Flutter
Flutter is a UI development toolkit primarily used for building applications for various platforms using a single codebase. It is completely open-source and is a product of Google.
Simply put, this means that developers can write the code once and use it on different platforms without having to start from scratch for each one.
Note: We offer various courses if you aim to continue your journey in learning Flutter!
Note: Before proceeding with the answer, ensure that your Flutter setup is complete.
Flutter layouts
In Flutter, layouts are primarily used to arrange and position widgets within the UI i.e. user interface. Flutter provides quite a lot of layout widgets to help us build responsive and flexible UIs for different screen sizes and orientations. It's an integral part of the UI and makes things much easier for us!
Common layouts offered by Flutter
Some of the commonly used layout widgets in Flutter are given in the table below.
Common layout widgets
Widget name | Widget explanation |
Container | The |
Row | The |
Column | The |
Stack | The |
GridView | The |
ListView | The |
Expanded | The |
Experimenting with different layouts
Row and Column layout
A row layout will arrange its children in a horizontal line, while a column layout will arrange its children in a vertical line.
A row looks something like the given picture below.
Starter code
The following is a basic code written in Dart to demonstrate the use of Row.
void main() {runApp(MaterialApp(home: Scaffold(body: Row(children: [Container(color: Colors.red,width: 100,height: 100,),Container(color: Colors.green,width: 100,height: 100,),],),),),);}
GridView layout
A grid layout contains both rows and columns since it allows data to be displayed in a two-dimensional structure.
A grid layout looks something like the given picture below.
Starter code
The following is a basic code written in Dart to demonstrate the use of GridView.
void main() {runApp(MaterialApp(home: Scaffold(body: GridView.count(crossAxisCount: 2,children: [Container(color: Colors.red,width: 100,height: 100,),Container(color: Colors.green,width: 100,height: 100,),Container(color: Colors.blue,width: 100,height: 100,),Container(color: Colors.yellow,width: 100,height: 100,),],),),),);}
ListView layout
A list layout allows displaying its children components in a linear list i.e. one-dimensional structure. This could be either horizontal or vertical.
A list layout looks something like the given picture below.
Starter code
The following is a basic code written in Dart to demonstrate the use of ListView.
void main() {runApp(MaterialApp(home: Scaffold(body: ListView(children: [ListTile(title: Text('Item 1'),),ListTile(title: Text('Item 2'),),ListTile(title: Text('Item 3'),),],),),),);}
Expanded layout
An expanded layout is immensely useful when the remaining spaces have to be utilized, and the children components are supposed to fill the space along the main axis of the parent.
An expanded layout looks something like the given picture below.
Starter code
The following is a basic code written in Dart to demonstrate the use of Expanded.
void main() {runApp(MaterialApp(home: Scaffold(body: Row(children: [Expanded(child: Container(color: Colors.red,height: 100,),),Expanded(child: Container(color: Colors.green,height: 100,),),],),),),);}
Stack layout
A stack layout allows overlaying its children components on top of each other, just like the data structure stack.
A stack layout looks something like the given picture below.
Starter code
The following is a basic code written in Dart to demonstrate the use of Stack.
void main() {runApp(MaterialApp(home: Scaffold(body: Stack(children: [Container(color: Colors.red,width: 200,height: 200,),Container(color: Colors.green,width: 150,height: 150,),Container(color: Colors.blue,width: 100,height: 100,),],),),),);}
All layouts put together
Yay, we've gone through various types of layouts offered by Flutter! The next step is to combine them together in our application.
Here's the complete working code of a Flutter application supporting these layouts. Feel free to experiment with the code and click "Run" once done.
import 'package:flutter/material.dart';
void main() => runApp(CoolLayoutDemo());
class CoolLayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: Text(
'Cool Layout Demo',
style: TextStyle(fontSize: 24),
),
centerTitle: true,
backgroundColor: Colors.blueGrey[900],
elevation: 0,
),
body: ListView(
padding: EdgeInsets.symmetric(vertical: 20),
children: [
Center(
child: Text(
'Row and Column Layout',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 28,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 80,
height: 80,
color: Colors.red,
),
Container(
width: 80,
height: 120,
color: Colors.green,
),
Container(
width: 80,
height: 60,
color: Colors.blue,
),
],
),
),
Center(
child: Text(
'Stack and Positioned Layout',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 28,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
Container(
height: 160,
color: Colors.blueGrey[900],
child: Stack(
children: [
Positioned(
top: 30,
left: 30,
child: Container(
width: 80,
height: 80,
color: Colors.red,
),
),
Positioned(
top: 60,
left: 60,
child: Container(
width: 120,
height: 40,
color: Colors.green,
),
),
Positioned(
top: 70,
left: 90,
child: Container(
width: 50,
height: 50,
color: Colors.blue,
),
),
],
),
),
Center(
child: Text(
'Expanded Layout',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 28,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
Container(
color: Colors.blueGrey[900],
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Row(
children: [
Expanded(
child: Container(
height: 60,
color: Colors.red,
),
),
Expanded(
child: Container(
height: 90,
color: Colors.green,
),
),
Expanded(
child: Container(
height: 50,
color: Colors.blue,
),
),
],
),
),
Center(
child: Text(
'GridView',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 28,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
Container(
color: Colors.blueGrey[900],
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
height: 140,
child: GridView.count(
crossAxisCount: 2,
children: List.generate(
4,
(index) => Container(
color: Colors.purple,
margin: EdgeInsets.all(8),
),
),
),
),
Center(
child: Text(
'ListView',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 28,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
Container(
color: Colors.blueGrey[900],
height: 140,
padding: EdgeInsets.symmetric(horizontal: 20),
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 5,
itemBuilder: (context, index) {
return Container(
width: 70,
color: index % 2 == 0 ? Colors.orange : Colors.teal,
margin: EdgeInsets.symmetric(horizontal: 8),
);
},
),
),
],
),
),
);
}
}
Layout output
The above code gives the following output. We can adjust the screen size to see how it would look on web or mobile platforms.
Web orientation
Mobile orientation
End notes
These were just some of the commonly used layout widgets in Flutter that we used in our code. We can create more complex and responsive UIs too. By combining these layout widgets creatively, we can design visually appealing and user-friendly interfaces for any kind of Flutter application.
Explore other Flutter Answers
Note: Explore the Flutter series here!
How well do you know Flutter layouts?
GridView
Child widgets are placed on top of each other
ListView
A one-dimensional linear structure
Stack
A two-dimensional structure with rows and columns
Free Resources
