How to nest Rows and Columns in Flutter

Introduction

Nesting Rows and Columns in Flutter is absolutely necessary when it comes to implementing complex UI. It’s a good idea to understand this concept before you use it.

Let’s get started!

What is the problem?

Whenever we try to nest a Column into a Column, like this:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: MyHomePage()));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Column(
            children: [
              Expanded(
                child: Container(color: Colors.red),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Or a Row into a Row:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: MyHomePage()));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          Row(
            children: [
              Expanded(
                child: Container(color: Colors.red),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

We will will see this exception:

════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite height.

Why is that?

Columns and Rows are built so that they pass an infinite constraint along the main axis to their children (in our case to a nested Column or Row). However, children don’t know the maximum height (or width, when it comes to Rows), which causes the exception shown above.

Notice that Column has a vertical main axis, so it passes an infinite height down the widget tree.

A similar situation is when it comes to the Row widget but, in this case, the main axis is horizontal, so it passes an infinite width down the widget tree.

A simple solution

We can solve this by wrapped the Column (or Row), that has been passed an infinite constraint, in an Expanded widget:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: MyHomePage()));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded( // added Expanded widget
            child: Column(
              children: [
                Expanded(
                  child: Container(color: Colors.red),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

After wrapping the nested Column in an Expanded widget, the exception is gone and the app runs as expected.

Conclusion

As you can see, nesting Rows and Columns in Flutter can be quite challenging if you don’t know how it works.

I hope that after reading this shot, you won’t have any issues or errors with implementing this concept in your future apps.

Thank you for reading!