Responsive and Adaptive UI in Flutter/

...

/

The Flexible Widget

The Flexible Widget

Assign available space to the children of the Row and Column widgets using the Flexible widget.

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, we replace the Column widget with a IconAndNameColumn defined in icon_and_name_column.dart.

There are two rows in IconAndNameColumn. In the first one, from ...