...

/

Use Wrap to Fill the Space

Use Wrap to Fill the Space

Improve the layout of a list of widgets with Wrap.

Given that most smartphone applications use portrait mode, collections of widgets are often implemented using ListView widgets. When porting an existing smartphone application to a larger screen, ListView widgets might not scale well. For example, the application in the code below has a list of courses on the first screen.

import 'package:flutter/material.dart';

import 'profile_view.dart';
import 'settings_view.dart';

class AppMenu extends StatelessWidget {
  const AppMenu({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: SafeArea(
        right: false,
        child: Column(
          children: <Widget>[
            _AppMenuButton(
              icon: const Icon(Icons.account_circle),
              title: 'Profile',
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const ProfileView()),
                );
              },
            ),
            _AppMenuButton(
              icon: const Icon(Icons.settings),
              title: 'Settings',
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const SettingsView()),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

class _AppMenuButton extends StatelessWidget {
  final Icon icon;
  final String title;
  final Function() onPressed;
  const _AppMenuButton({
    Key? key,
    required this.icon,
    required this.title,
    required this.onPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final canFitTitle = constraints.maxWidth > 180;

        return canFitTitle
            ? ListTile(
                leading: icon,
                title: Text(title),
                onTap: onPressed,
              )
            : IconButton(
                onPressed: onPressed,
                icon: icon,
              );
      },
    );
  }
}
The course application with a list of courses on the main page

In course_list.dart, we ...