What is the difference between the Single-Child Layout Widget & Multi-Child Layout Widget in flutter?

Question

I have recently started learning Flutter. I came across layout widgets. In that stage, all the widgets are divide into two stages.

Think about this intuitively. Consider a column widget, this is meant to have more than one child laid down vertically. so Column is a multi Child widget. on the other hand consider a center widget, which is meant to center its child, so it a single child layout widget. — meditat

Aakash kondhalkar Aakash kondhalkar · Accepted Answer · 2021-01-27T10:03:42

Single-Child Layout Widgets are the ones that will accept only one widget as there child

Such as: Container(), Center(), Expanded(), Align(), SizedBox() etc.

Multi-Child Layout Widgets are the ones that will accept more than one widget as there child

Such as: Column(), Row(), Stack(), GridView(), ListView(), Table() etc.

In very simple term Whenever you see or use a widget with a child property, That widget called Single-Child Layout

Container(child: Text()); 
Center(child: Text());
Expanded(child: Text()); 
Align(child: Text());
SizedBox(child: Text());

And Whenever you see or use a widget with a children property, That widget called Single-Child Layout*

Column(children: [Text(), Text(), Text(), Text()]);
Row(children: [Text(), Text(), Text(), Text()]);
Stack(children: [Text(), Text(), Text(), Text()]);
GridView(children: [GridTile(), GridTile(), GridTile(), GridTile()]); 
ListView(children: [ListTile(), ListTile(), ListTile(), ListTile()]);
Table(children: [TableRow(), TableRow(), TableRow(), TableRow()]);

You can use Multi-Child Layouts inside Single-Child Layout And Vice Versa.

// Single child layout with Multi-Child layout
Container(child: ListView(children: [])); 

// Multi-child layout with Single-Child layout
ListView(children: [ 
             Container(child: Text()), 
             Container(child: Text()), 
             Container(child: Text()),
   ]
));

Single-Child Layout Widget is used as Wrapper for other widgets for changing their positions, width, height, adding space, margin, and aligning content, etc.

Multi-Child Layout Widget is used for creating a list of widgets in the horizontal or vertical direction, also for stacking widgets one over another, Arranging data as well as widgets in a table structure, etc.

I hope this will help you!

What is the difference between the Single-Child Layout Widget & Multi-Child Layout Widget in flutter?

1 Answers