Limit the Size of a Widget
Improve UI responsiveness by limiting the size of a widget.
We'll cover the following...
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 ...