The Row widget arranges its children widgets horizontally, in a single line, from left to right. It’s a core layout tool in Flutter, commonly used to align text, icons, buttons, or any widgets side by side.
Source Code
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(Icons.menu, size: 32, color: Colors.teal),
Text(
'Title',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
Icon(Icons.search, size: 32, color: Colors.teal),
],
)
Ai Code Analizer
🎨 3. Important Properties Used
| Property | Description |
|---|---|
children | List of widgets to arrange horizontally. |
mainAxisAlignment | Controls horizontal alignment (e.g., start, center, spaceBetween). |
crossAxisAlignment | Controls vertical alignment of children (e.g., start, center). |
mainAxisSize | Determines how much horizontal space the Row should use (max or min). |
textDirection | Layout from left-to-right or right-to-left. |
verticalDirection | Controls vertical order if children are wrapped (rarely used with Row). |
🔧 4. Common Alignments
MainAxisAlignment.start– Align left (default).MainAxisAlignment.center– Center all children horizontally.MainAxisAlignment.spaceBetween– First and last at edges, space between others.CrossAxisAlignment.start– Align all children to the top of the Row.CrossAxisAlignment.center– Vertically center all children (default).