UI and layout

Declarative UI

What

You describe what the screen should look like for the current state, and the framework works out what to change on screen. You never update a label by hand.

Why

Flutter, React Native, Jetpack Compose and SwiftUI all work this way. It removes whole classes of bugs where the screen and the data disagree.

class Greeting extends StatelessWidget {
  const Greeting({super.key, required this.name});
  final String name;

  @override
  Widget build(BuildContext context) {
    return Text('Hello, $name');
  }
}

Widgets, elements and BuildContext

Also called widget tree

What

A widget is an immutable description of part of the UI. Flutter keeps a longer-lived element tree behind it, and BuildContext is a widget's position in that tree.

Why

You use BuildContext to look up things above you, such as Theme.of(context) or Navigator.of(context). Knowing widgets are cheap to recreate explains why rebuilds are normal.

Constraints go down, sizes go up

Also called RenderFlex overflow, unbounded height, constraints

What

A parent passes size limits (constraints) to each child, the child picks a size within them, and the parent positions it. A widget cannot choose a size its parent does not allow.

Why

This rule explains nearly every layout error, including yellow and black overflow stripes and "vertical viewport was given unbounded height".

Column(
  children: [
    const Header(),
    Expanded(
      child: ListView(children: items),
    ),
  ],
)

Rows, columns and stacks

Also called Row, Column, HStack, VStack

What

The basic layout containers place children horizontally, vertically or on top of each other, with spacing and alignment options.

Why

Almost every screen is nested rows and columns. Splitting a design into these boxes is the first step of building any screen.

Row(
  children: [
    const CircleAvatar(child: Icon(Icons.person)),
    const SizedBox(width: 12),
    Expanded(child: Text(user.name)),
  ],
)

Lazy lists

Also called ListView.builder, FlatList, LazyColumn, virtualised list

What

A lazy list only builds the rows currently on screen, plus a few ahead, and recycles them as you scroll. Each row gets a stable key.

Why

Building thousands of rows at once uses lots of memory and makes scrolling stutter. Stable keys keep row state and animations attached to the right item.

ListView.builder(
  itemCount: posts.length,
  itemBuilder: (context, i) => ListTile(
    key: ValueKey(posts[i].id),
    title: Text(posts[i].title),
  ),
)

Text input and forms

What

A text field shows a value from state and reports every change back. Keyboard type, autofill hints and validation messages make forms fast to fill in.

Why

Login, sign-up and checkout are forms, and small details like the email keyboard and autofill decide whether people finish them.

TextFormField(
  controller: emailController,
  keyboardType: TextInputType.emailAddress,
  autofillHints: const [AutofillHints.email],
  decoration: const InputDecoration(labelText: 'Email'),
  validator: (v) =>
      v != null && v.contains('@') ? null : 'Enter an email',
)

Theming and dark mode

Also called dark mode, semantic colour, dynamic colour

What

A theme defines colours, typography and shapes in one place. Components read colours from the theme by role, such as primary or surface, and the app switches palettes when the system switches to dark mode.

Why

A theme keeps the app consistent and makes dark mode and brand changes a one-file job instead of a hunt through every screen.

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
  ),
  darkTheme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.teal,
      brightness: Brightness.dark,
    ),
  ),
  home: const HomeScreen(),
)

Platform design guidelines

Also called Material Design, Human Interface Guidelines, HIG, Material 3, Cupertino

What

Material Design 3 is Google's design system for Android, and the Human Interface Guidelines are Apple's rules for iOS. They cover navigation patterns, spacing, typography, controls and touch target sizes.

Why

Users expect apps to behave like the rest of their phone. Following the guidelines avoids confusing navigation and some App Store review problems.

Example

Minimum touch targets are 48 by 48 dp on Android and 44 by 44 points on iOS. Android users expect the system back gesture to work everywhere; iOS users expect to swipe from the left edge to go back.

Safe areas and screen sizes

Also called edge-to-edge, insets, responsive layout, safe area, edge to edge, system bars, window size class, Dynamic Island

What

Safe areas, or insets, are the parts of the screen not covered by the notch, status bar, camera cutout or gesture bar. Responsive layouts adapt to small phones, large phones, foldables and tablets.

Why

Content under the status bar or home indicator is unreadable or untappable. Android 15 draws apps edge to edge by default, so insets must be handled on purpose.

Example

Flutter uses SafeArea and LayoutBuilder. React Native uses react-native-safe-area-context and useWindowDimensions. Compose uses WindowInsets and window size classes. SwiftUI respects safe areas by default and uses size classes.

Hot reload and previews

Also called Fast Refresh, Compose Preview, Xcode Previews, hot reload, hot restart, Live Edit

What

Tools that show code changes in a running app or an editor preview within a second or two, without rebuilding the whole app.

Why

Layout work is trial and error, and a fast loop makes it quick. Flutter has hot reload, React Native has Fast Refresh, Compose has @Preview and Live Edit, and SwiftUI has #Preview.