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

The Expanded Widget

Explore how to use the Expanded widget in Flutter to create flexible layouts within Row and Column widgets. Learn to control space allocation with the flex property, enhancing your UI responsiveness across different screen sizes.

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 ...