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

Use Wrap to Fill the Space

Explore how to enhance your Flutter app layouts by using the Wrap widget with constrained widths. Understand how this approach replaces ListView to create adaptive UI that looks like a list on small screens and a grid on larger displays, ensuring your app is responsive across device types.

We'll cover the following...

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