.png)
In Flutter, the two most significant and effective widgets are Row and Column. Row and Column are layout widgets used to arrange child widgets horizontally and vertically, respectively. They are fundamental for building user interfaces and organising the layout of your app's UI elements.
The row and column widgets are not the same thing; rather, they are two distinct widgets. Here, we will coordinate these two gadgets together in light of the fact that they have comparative properties that assist us with understanding them proficiently and rapidly.
Flutter Row vs Column Widget
Row | Column |
|---|---|
This widget arranges its children horizontally. To put it another way, it will expect a horizontal array of child widgets. We must wrap the child widgets in an Expanded widget if they need to fill the horizontal space that is available. | This widget arranges its children vertically. As such,It creates a vertical array of children. We must wrap the child widgets in an Expanded widget if they need to fill the vertical space that is available. |
It displays the widgets within the view that is visible, a row widget does not appear to be scrollable.
Therefore, it is not acceptable to have more children in a row than there is available space for. The ListView widget must be utilized if we want to create a scrollable list of row widgets.
| The widgets are displayed within the visible view, a column widget does not appear to be scrollable. Therefore, it is not acceptable to have more children in a column than there is available space for. The ListView Widget is what we need to create a scrollable list of column widgets. |
Alignment: We can align our content by using mainAxisAlignment and crossAxisAlignment. Children are aligned from left to right. Row’s mainAxis is horizontal and cross Axis to Row’s main Axis is vertical. We can align children horizontally using MainAxisAlignment and vertically using CrossAxisAlignment in that row. | Alignment: We can align our content by using mainAxisAlignment and crossAxisAlignment. Children are aligned from top to bottom. Column's main Axis is vertical and the Cross Axis is horizontal. MainAxisAlignment aligns its children vertically and CrossAxisAlignment aligns horizontally in that Column. |
Constructors
 Row class
Row(
{Key key,
MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,
MainAxisSize mainAxisSize: MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection: VerticalDirection.down,
TextBaseline textBaseline: TextBaseline.alphabetic,
List<Widget> children: const <Widget>[]}
)
 Column Class
Properties of Row & Column widget
children
Description: List of widgets to be arranged horizontally or vertically within the Row or Column.
Type: List<Widget>
Example:
Row(
children: [
Text('Widget 1'),
Text('Widget 2'),
],
)mainAxisAlignment
crossAxisAlignment
mainAxisSize
textDirection(Row specific property)
verticalDirection(Column specific property)
Practice with Row & Column widgets
Column Example
class ColumnExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Color(0xff3555c0),
leading: SvgPicture.asset(
'assets/image/code_capp1.svg',
fit: BoxFit.fitWidth,
), //remove this line
title: Text('Code Cappuccino', style: TextStyle(color: Colors.white)),
),
body: Container(
color: Colors.white,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
color: Colors.deepPurple.shade200,
height: 50,
width: 100,
child: const Align(
alignment: Alignment.center,
child: Text(
'Item 1',
),
)),
Container(
color: Colors.deepPurple.shade300,
height: 50,
width: 100,
child: const Align(
alignment: Alignment.center,
child: Text(
'Item 2',
),
)),
Container(
color: Colors.deepPurple.shade400,
height: 50,
width: 100,
child: const Align(
alignment: Alignment.center,
child: Text(
'Item 3',
),
)),
],
),
Container(
width: 80,
color: Colors.deepPurple,
child: Column(
//Stretches to vertically fill its parent container
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
color: Colors.deepPurple.shade200,
height: 80,
width: 80,
child: const Align(
alignment: Alignment.center,
child: Text(
'Item 1',
),
)),
Container(
color: Colors.deepPurple.shade300,
height: 80,
width: 80,
child: const Align(
alignment: Alignment.center,
child: Text(
'Item 2',
),
)),
Container(
color: Colors.deepPurple.shade400,
height: 80,
width: 80,
child: const Align(
alignment: Alignment.center,
child: Text(
'Item 3',
),
)),
],
)),
Container(
width: 100,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.deepPurple.shade200,
height: 50,
width: 70,
child: const Align(
alignment: Alignment.center,
child: Text('Item 1'))),
//Will expand to fill all remaining space
Container(
color: Colors.deepPurple.shade300,
height: 50,
width: 50,
child: const Align(
alignment: Alignment.center,
child: Text(
'Item 2',
),
)),
Container(
color: Colors.deepPurple.shade400,
height: 50,
width: 70,
child: const Align(
alignment: Alignment.center,
child: Text(
'Item 3',
),
)),
],
),
),
]),
),
),
);
}
}Row Example
class RowExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Color(0xff3555c0),
leading: SvgPicture.asset(
'assets/image/code_capp1.svg',
fit: BoxFit.fitWidth,
),//remove this line
title: Text('Code Cappuccino', style: TextStyle(color: Colors.white)),
),
body: Container(
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Row(
//Creates even space between each item and their parent container
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
color: Colors.deepPurple.shade200,
height: 40,
width: 70,
child: Text('Item 1')),
Container(
color: Colors.deepPurple.shade300,
height: 40,
width: 70,
child: Text('Item 2')),
Container(
color: Colors.deepPurple.shade400,
height: 40,
width: 70,
child: Text('Item 3')),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
color: Colors.deepPurple.shade200,
height: 50,
width: 100,
child: const Align(
alignment: Alignment.center,
child: Text(
'Item 1',
),
)),
Container(
color: Colors.deepPurple.shade300,
height: 50,
width: 100,
child: const Align(
alignment: Alignment.center,
child: Text(
'Item 2',
),
)),
Container(
color: Colors.deepPurple.shade400,
height: 50,
width: 100,
child: const Align(
alignment: Alignment.center,
child: Text(
'Item 3',
),
)),
],
),
Container(
height: 80,
color: Colors.deepPurple,
child: Row(
//Stretches to vertically fill its parent container
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
color: Colors.deepPurple.shade200,
height: 40,
width: 80,
child: const Align(
alignment: Alignment.center,
child: Text(
'Item 1',
),
)),
Container(
color: Colors.deepPurple.shade300,
height: 40,
width: 80,
child: const Align(
alignment: Alignment.center,
child: Text(
'Item 2',
),
)),
Container(
color: Colors.deepPurple.shade400,
height: 40,
width: 80,
child: const Align(
alignment: Alignment.center,
child: Text(
'Item 3',
),
)),
],
)),
Container(
height: 100,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.deepPurple.shade200,
height: 50,
width: 70,
child: const Align(
alignment: Alignment.center,
child: Text('Item 1'))),
//Will expand to fill all remaining space
Container(
color: Colors.deepPurple.shade300,
height: 50,
width: 50,
child: const Align(
alignment: Alignment.center,
child: Text(
'Item 2',
),
)),
Container(
color: Colors.deepPurple.shade400,
height: 50,
width: 70,
child: const Align(
alignment: Alignment.center,
child: Text(
'Item 3',
),
)),
],
),
),
]),
),
),
);
}
}
Drawbacks:
Flutter's row widget lacks horizontal scrolling. As a result, the Overflow message will appear if we insert a large number of children into a single row that cannot fit there.
Flutter's column widget lacks vertical scrolling. As a result, the Overflow message will appear if we insert a large number of children into a single column that cannot fit there.
コメント