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

The Flexible Widget

Explore how to use the Flexible widget in Flutter to create responsive user interfaces. Understand the differences and similarities between Flexible and Expanded, including how to control child widget sizing and flex behavior for adaptable layouts.

We'll cover the following...

We can use the Flexible widget to achieve the same results we get with an Expanded widget. The difference is that, while Expanded forces its child to fill all the available space, Flexible lets the child decide its own size. However, it gives it the possibility to fill the available space.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Expanded(
              child: Container(
                color: Colors.green[700],
                child: const SizedBox(
                  width: 120.0,
                  child: Icon(
                    Icons.web,
                    size: 80.0,
                  ),
                ),
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.green[200],
                child: Text(iconName),
              ),
            ),
          ],
        ),
        Row(
          children: [
            Flexible(
              child: Container(
                color: Colors.green[700],
                child: const SizedBox(
                  width: 120.0,
                  child: Icon(
                    Icons.web,
                    size: 80.0,
                  ),
                ),
              ),
            ),
            Flexible(
              child: Container(
                color: Colors.green[200],
                child: Text(iconName),
              ),
            ),
          ],
        ),
      ],
    );
  }
}
Two Row widgets with Expanded and Flexible children

The code above is similar to the one in the previous lesson. In main.dart ...