Limit the Size of a Widget
Improve UI responsiveness by limiting the size of a widget.
We'll cover the following...
When we work on a Flutter application, we might need to create a screen with a widget that shows detailed information. On a smartphone, this view will typically take up all the space on the screen. Run the following code and tap on one of the courses in the list. A detailed view will appear with more information about the course.
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, ); }, ); } }
A detail page that isn’t responsive
In course_details.dart
, we have a SingleChildScrollView
in _scrollableView()
in line 44 and a Container
in _bottomArea()
in line 110 that are children of a Column
widget in line 18 ...