Category · 10 tips

Widgets & layout

029Style an ElevatedButton with styleFrom and themesUse ElevatedButton.styleFrom for one button, ElevatedButtonThemeData for all of them, and WidgetStateProperty when a style depends on state.buttons
026Show real progress with a value on progress indicatorsGive CircularProgressIndicator or LinearProgressIndicator a value from 0.0 to 1.0 and they show how far along you are instead of spinning.progress
023Make text selectable across widgets with SelectionAreaWrap a subtree in SelectionArea and one selection runs across all its Text widgets. SelectionContainer.disabled carves out the parts to skip.text
020React to the app going to the background with AppLifecycleListenerAppLifecycleListener gives you one named callback per lifecycle transition. No observer mixin needed, but you must dispose it.lifecycle
017Replace Container with the widgets it wrapsContainer is a bundle of Padding, ColoredBox, DecoratedBox, Align and SizedBox. Use those directly and the whole subtree can be const.widgets
015Give buttons the same width with IntrinsicWidthWrap a Column in IntrinsicWidth and stretch its children, and every button matches the widest one, whatever the text size.layout
011Return SizedBox.shrink() when there is nothing to showA build method must return a widget. For "nothing", return const SizedBox.shrink(), not an empty Container.widgets
007Use MediaQuery.sizeOf instead of MediaQuery.ofMediaQuery.of rebuilds your widget when anything changes. MediaQuery.sizeOf and friends rebuild only when the value you read changes.performance
004Check context.mounted after every awaitA BuildContext can go stale while you await. Check context.mounted before you use it again, or grab what you need first.context
002Column(spacing:) replaces a SizedBox between every childRow, Column and Flex take a spacing value, so you no longer need a SizedBox or the gap package between children.layout