A layout widget is a tool in Flutter that helps arrange and position UI elements (widgets) on the screen. It determines how elements like text, images, or buttons are displayed and aligned within the app’s user interface. Common layout widgets include Row, Column, Stack, and GridView, each serving a specific purpose in organizing content.
Layouts in Flutter
Key takeaways:
Layouts in Flutter serve as the blueprint for organizing widgets, ensuring usability, responsiveness, performance, and visual appeal across devices and screen orientations.
Flutter offers versatile widgets like
Rowfor horizontal alignment,Columnfor vertical stacking,GridViewfor 2D grid displays,ListViewfor scrollable lists,Stackfor overlaying elements, andExpandedfor dynamically utilizing space.Flutter layouts adapt seamlessly to web, mobile, and tablet devices, enabling developers to create applications with consistent user experiences across platforms.
Combining different layouts (e.g.,
RowwithExpandedorStackwithPositioned) enhances flexibility, allowing developers to build polished, complex UIs.Predefined starter codes for layouts like
Row,GridView,ListView, andStackprovide an easy entry point for experimenting with and customizing layouts.
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.
What layouts generally look like
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.
Flutter in a few words
Note: We offer various courses if you aim to continue your journey in learning Flutter!
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!
Why choosing the right layout matters
Choosing the right layout in Flutter isn't just about arranging widgets on a screen—it's crucial for providing an intuitive and responsive user experience. A well-chosen layout ensures that:
Usability: The app is easy to navigate, and users can interact with different elements effortlessly.
Responsiveness: The app adapts seamlessly to different screen sizes and orientations, making it accessible on mobile, web, and tablet devices.
Performance: Optimizing layouts ensures that the app runs smoothly, avoiding unnecessary re-renders or slow performance.
Visual appeal: The app's clean and organized layout is aesthetically pleasing, leading to higher user engagement.
By understanding the purpose of each layout widget and using them appropriately, you can create apps that are not only functional but also polished and professional.
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 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 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 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 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 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),
);
},
),
),
],
),
),
);
}
}
Complete implementation
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
Web oriented layout
Mobile orientation
Mobile oriented layout
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.
Note: Explore the Flutter series here!
Conclusion
In summary, understanding and implementing layouts in Flutter is essential for creating responsive, visually appealing, and efficient user interfaces. By utilizing common layout widgets such as Row, Column, Stack, and GridView, developers can organize and structure their app’s content effectively. Choosing the right layout not only enhances the usability and performance of the application but also ensures that it adapts seamlessly to various screen sizes and platforms. As you continue to experiment with and combine these layouts, you'll be able to design more complex and sophisticated UIs that deliver a great user experience across devices.
How well do you know Flutter layouts?
Match The Answer
Select an option from the left-hand side
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
Frequently asked questions
Haven’t found what you were looking for? Contact Us
What is a layout widget?
What is MVVM architecture in Flutter?
What is flex layout in Flutter?
Free Resources
Copyright ©2025 Educative, Inc. All rights reserved
TRENDING TOPICS
