Responsive and Adaptive UI in Flutter/

...

/

The Expanded Widget

The Expanded Widget

Improve your rows and columns by assigning the available space to some or all of the children.

We'll cover the following...

All important layouts in Flutter use the Row and Column widgets. We use them to arrange their children widgets horizontally or vertically. We can also combine them to create a complex layout. Both have a built-in method to align their children with mainAxisAlignment and crossAxisAlignment. Sometimes, however, they’re not enough if we want to have a responsive UI.

We’ll learn more about using the aligning methods to improve the responsiveness of our UI in future chapters. For now, we’ll focus on the space taken by each child. For example, look at the following code:

import 'package:flutter/material.dart';

class IconAndName extends StatelessWidget {
  final IconData iconData;
  final String iconName;

  const IconAndName({Key? key, required this.iconData, required this.iconName})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        SizedBox(
          width: 100.0,
          height: 100.0,
          child: Icon(
            iconData,
            size: 80.0,
          ),
        ),
        Text(iconName),
      ],
    );
  }
}
A Row widget with an icon and some text as children

In main.dart, the application consists of a list of IconAndName widgets arranged vertically in a Column in lines 33 to 37. We’ll work on the IconAndName widget in icon_and_name.dart, ...