Search⌘ K
AI Features
Home
Courses
Responsive and Adaptive UI in Flutter

The Row Widget

Explore how the Row widget in Flutter structures horizontal layouts and affects responsiveness. Learn to adjust alignment using MainAxisAlignment and Spacer widgets to improve UI spacing and adaptability, focusing on practical e-commerce layout examples.

We'll cover the following...

The Row widget is similar to the Column widget. They both extend the Flex widget. The only difference between them is the direction along which the children are placed. We’ll illustrate how we define the constructors of Row and Column widgets in the following code:

Dart
Column({
  Key? key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  MainAxisSize mainAxisSize = MainAxisSize.max,
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  TextDirection? textDirection,
  VerticalDirection verticalDirection = VerticalDirection.down,
  TextBaseline? textBaseline,
  List<Widget> children = const <Widget>[],
}) : super(
  children: children,
  key: key,
  direction: Axis.vertical,
  mainAxisAlignment: mainAxisAlignment,
  mainAxisSize: mainAxisSize,
  crossAxisAlignment: crossAxisAlignment,
  textDirection: textDirection,
  verticalDirection: verticalDirection,
  textBaseline: textBaseline,
);
Row({
  Key? key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  MainAxisSize mainAxisSize = MainAxisSize.max,
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  TextDirection? textDirection,
  VerticalDirection verticalDirection = VerticalDirection.down,
  TextBaseline? textBaseline,
  List<Widget> children = const <Widget>[],
}) : super(
  children: children,
  key: key,
  direction: Axis.horizontal,
  mainAxisAlignment: mainAxisAlignment,
  mainAxisSize: mainAxisSize,
  crossAxisAlignment: crossAxisAlignment,
  textDirection: textDirection,
  verticalDirection: verticalDirection,
  textBaseline: textBaseline,
);

In the code snippet above, super refers to the constructor of Flex. The only difference between Row and Column is the direction argument in lines 13 and 34.

In this lesson, we’ll look at one of the most common cases of a Row widget that wasn’t designed with UI responsiveness in mind and learn how to improve it.

A common Row

...