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 Row for horizontal alignment, Column for vertical stacking, GridView for 2D grid displays, ListView for scrollable lists, Stack for overlaying elements, and Expanded for 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., Row with Expanded or Stack with Positioned) enhances flexibility, allowing developers to build polished, complex UIs.

  • Predefined starter codes for layouts like Row, GridView, ListView, and Stack provide 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
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
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 Container widget allows us to customize the appearance of its child widget. It can add padding, margin, borders, and backgrounds to the child.

Row

The Row widget is used to arrange its child widgets horizontally in a row. We can control the alignment and spacing between the children using mainAxisAlignment and crossAxisAlignment .

Column

The Column widget arranges its children vertically in a column. It also includesmainAxisAlignment and crossAxisAlignment.

Stack

The Stack widget is used to stack its children on top of each other. We can make use of Positioned widgets to control the position of each child.

GridView

The GridView widget arranges its children in a 2D grid so that items can be displayed in a grid format.

ListView

The ListView widget displays a scrollable list of its children in a single direction i.e. horizontal or vertical.

Expanded

The Expanded widget is used to distribute available space among its children. Its used in Row or Column to take up available space.


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
Web oriented layout

Mobile orientation

Mobile oriented layout
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?

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.

What is MVVM architecture in Flutter?

MVVM (Model-View-ViewModel) is a software architectural pattern that helps separate the app’s UI (View) from the business logic and data (Model) through a mediator (ViewModel).

In Flutter:

Model: Represents the data and business logic of the app.

View: The UI layer that displays the data and interacts with the user.

ViewModel: Acts as a bridge between the View and Model. It handles data transformation and provides the data to the View in a way that’s easy to display.

MVVM helps maintain a clean separation of concerns, making the code more maintainable and testable.

What is flex layout in Flutter?

The flex layout in Flutter refers to a layout model used by Row and Column widgets, where their children can be arranged either horizontally (in a Row) or vertically (in a Column) along the main axis. Key aspects of the flex layout include:

Main axis and cross axis: The main axis is the primary direction (horizontal for Row, vertical for Column), while the cross axis is perpendicular to it.

Flexible space: Widgets can expand or shrink to fill available space using the Expanded or Flexible widgets.

Alignment and spacing: Flex layouts allow control over alignment and spacing of child widgets through properties like mainAxisAlignment and crossAxisAlignment.

This makes flex layouts ideal for creating responsive UIs that adapt to different screen sizes.

New on Educative
Learn to Code
Learn any Language as a beginner
Develop a human edge in an AI powered world and learn to code with AI from our beginner friendly catalog
🏆 Leaderboard
Daily Coding Challenge
Solve a new coding challenge every day and climb the leaderboard

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved