Flutter Layouts: Rows, Columns, and Stacks

Building user interfaces in Flutter is a breeze once you understand how its layout system works. The foundation of Flutter's UI-building experience lies in its layout widgets: Rows, Columns, and Stacks. Learning to effectively use these three core components will not only enhance your app's design but will also significantly improve user experience.

In Flutter, everything is a widget. This includes layout components, which means that Rows, Columns, and Stacks are also widgets. Each one is designed to help you organize and position other widgets efficiently.

 is a horizontal layout widget. It allows you to align multiple children widgets in a single horizontal line. By default, Rows will size themselves according to the height of their tallest child.

Here’s a simple code snippet demonstrating how to create a Row with two buttons:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    ElevatedButton(
      onPressed: () {},
      child: Text('Button 1'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button 2'),
    ),
  ],
)

 is the vertical counterpart of a Row. It places its children widgets on top of one another. Like Rows, Column's size is determined by the sum of its children's heights. Columns are useful for stacking widgets like text, images, or other controls vertically.

Here’s a practical example of using a Column:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text('Header 1'),
    Text('Header 2'),
    ElevatedButton(
      onPressed: () {},
      child: Text('Click Me!'),
    ),
  ],
)

 allow for the overlapping of children widgets. This is particularly beneficial when you want to create compound designs or overlay widgets on top of each other. A Stack positions its children relative to the top-left corner of the stack by default.

Here’s how you can use a Stack to place an image and a text label on top of one another:

Stack(
  alignment: Alignment.center,
  children: <Widget>[
    Image.asset('assets/sample_image.jpg'),
    Text(
      'Overlay Text',
      style: TextStyle(color: Colors.white, fontSize: 24),
    ),
  ],
)

Each of these layout widgets allows for various 

 options that can fine-tune their placement.

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Icon(Icons.home),
    Text('Home'),
  ],
)

Similarly, a Column supports the same alignment properties:

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.end,
  children: <Widget>[
    Text('Top'),
    Text('Middle'),
    Text('Bottom'),
  ],
)

Stack(
  alignment: Alignment.bottomRight,
  children: <Widget>[
    Image.asset('assets/sample_image.jpg'),
    Text('Bottom Right Overlay'),
  ],
)

One of the powerful features of Flutter is the ability to 

 layout widgets. This is particularly useful when building complex UIs.

Below is an example that demonstrates how to nest Rows and Columns effectively:

Column(
  children: <Widget>[
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        Icon(Icons.home),
        Icon(Icons.settings),
      ],
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        ElevatedButton(
          onPressed: () {},
          child: Text('First'),
        ),
        ElevatedButton(
          onPressed: () {},
          child: Text('Second'),
        ),
      ],
    ),
  ],
)

 widget allows a child of a Row or Column to expand and fill the available space. This is useful when you need to proportionally size your widgets:

Row(
  children: <Widget>[
    Expanded(
      child: Container(color: Colors.red, height: 50),
    ),
    Expanded(
      child: Container(color: Colors.blue, height: 50),
    ),
  ],
)

 widget for more custom control. It allows a widget to be flexible in size, meaning it can take as much space as it needs without enforcing a strict limit.

Row(
  children: <Widget>[
    Flexible(
      flex: 2,
      child: Container(color: Colors.green, height: 50),
    ),
    Flexible(
      flex: 1,
      child: Container(color: Colors.orange, height: 50),
    ),
  ],
)

Understanding how to effectively utilize Rows, Columns, and Stacks will simplify your Flutter development journey. By leveraging their alignment properties and nesting capabilities, you can build responsive and visually appealing layouts.

As you dive deeper into Flutter development, keep experimenting with these layout widgets. You'll soon discover how each component can be fine-tuned to achieve your desired design. Happy coding!

CONTRIBUTOR

Nate Murray

AUTHOR

Isaac Lyman

Building user interfaces in Flutter is a breeze once you understand how its layout system works. The foundation of Flutter's UI-building experience lies in its layout widgets: Rows, Columns, and Stacks. Learning to effectively use these three core components will not only enhance your app's design…

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

Flutter Layouts: Rows, Columns, and Stacks

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript