Material, Cupertino & Theming

Two design languages built in

Flutter ships two complete sets of UI widgets:

• Material (package:flutter/material.dart) — Google’s design system, the default for most apps.
• Cupertino (package:flutter/cupertino.dart) — Apple’s iOS-style widgets, for an iOS look.

Most teams use Material everywhere (it looks great on both platforms), and optionally swap to Cupertino widgets on iOS.

Common Material widgets

ElevatedButton(onPressed: () {}, child: const Text('Primary')),
OutlinedButton(onPressed: () {}, child: const Text('Outlined')),
TextButton(onPressed: () {}, child: const Text('Text')),
IconButton(icon: const Icon(Icons.favorite), onPressed: () {}),
Card(child: Padding(padding: EdgeInsets.all(16), child: Text('In a card'))),
Chip(label: const Text('Flutter')),

Scaffold: the screen skeleton

Scaffold gives a screen its standard structure: an app bar, a body, a floating action button, a bottom navigation bar and drawers.

Scaffold(
  appBar: AppBar(title: const Text('Home')),
  body: const Center(child: Text('Content')),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: const Icon(Icons.add),
  ),
)

Theming: brand once, apply everywhere

Define your colors and fonts in one ThemeData and every widget picks them up automatically — consistent styling for free.

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF7C3AED)),
    useMaterial3: true,
  ),
  home: const HomeScreen(),
)

ColorScheme.fromSeed generates a full, harmonious palette from one brand color — a great Material 3 feature.

Reading theme values

Text(
  'Title',
  style: Theme.of(context).textTheme.titleLarge
      ?.copyWith(color: Theme.of(context).colorScheme.primary),
)

Using Theme.of(context) instead of hard-coded colors means dark mode and rebranding just work.

Dark mode

MaterialApp(
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  themeMode: ThemeMode.system,   // follow the device setting
)

Common mistakes

• Hard-coding colors instead of reading from the theme (breaks dark mode/rebrand).
• Rebuilding components Flutter already provides.
• Forgetting useMaterial3: true for the modern look.

Summary: Flutter includes Material and Cupertino widget sets. Use Scaffold for screen structure, define a ThemeData (ideally from a seed color), and read styles via Theme.of(context) so theming and dark mode work everywhere.