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