Layouts: Nesting rows and columns

Nesting rows and columns

The layout framework allows you to nest rows and columns inside of rows and columns as deeply as you need. Let’s look at the code for the outlined section of the following layout:.

Nesting rows and columns Layouts: Nesting rows and columns 
Var stars = Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Icon(Icons.star, color: Colors.green[500]),
    Icon(Icons.star, color: Colors.green[500]),
    Icon(Icons.star, color: Colors.green[500]),
    Icon(Icons.star, color: Colors.black),
    Icon(Icons.star, color: Colors.black),
  ],
);

final ratings = Container(
  padding: EdgeInsets.all(20),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      stars,
      Text(
        '170 Reviews',
        style: TextStyle(
          color: Colors.black,
          fontWeight: FontWeight.w800,
          fontFamily: 'Roboto',
          letterSpacing: 0.5,
          fontSize: 20,
        ),
      ),
    ],
  ),
);

The outlined section is implemented as two rows. The ratings row contains five stars and the number of reviews. The icons row contains three columns of icons and text.

Nesting rows and columns Layouts: Nesting rows and columns

Note:

To minimize the visual confusion that can result from heavily nested layout code, implement pieces of the UI in variables and functions.

Related concepts

→
Nesting rows and columns

Layouts: Nesting rows and columns — Structure map

Clickable & Draggable!

Layouts: Nesting rows and columns — Related pages:

Layouts in Flutter