Styled Widgets: Material and Cupertino
Sprout works, but every screen is plain. You could colour each button by hand, and then change twenty places when the brand colour changes. Flutter instead ships complete, styled widget sets, and a theme that dresses them all from one spot.
The rule
Material for Google's look, Cupertino for Apple's; theme once, not per widget.
Material widgets follow Google's Material Design and work on every platform. An app built with them starts with MaterialApp:
MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
),
home: Scaffold(
appBar: AppBar(title: const Text('Sprout')),
body: const PlantList(),
floatingActionButton: FloatingActionButton(
onPressed: addPlant,
child: const Icon(Icons.add),
),
),
);Scaffold gives the page structure: app bar, body, floating button, drawers, snack bars. ColorScheme.fromSeed builds a whole palette from one colour, and every Material widget reads its colours from it.
Cupertino widgets copy the look and feel of iOS: CupertinoApp, CupertinoPageScaffold, CupertinoNavigationBar, CupertinoButton, CupertinoSwitch. Choose them when an app should feel native on iPhone. Some Material widgets offer an adaptive constructor, such as Switch.adaptive, which draws an iOS switch on Apple platforms and a Material one elsewhere.
In your own widgets, read the theme rather than hard-coding colours:
final green = Theme.of(context).colorScheme.primary;The shortcut
When you are tempted to set a colour or font on a single widget, ask "Should every widget like this look the same?"
All buttons should be green
That is a theme decision. Set the seed colour in
ThemeData, not on each button.
The trap is hard-coding Colors.green in thirty places. It works until the design changes or you add dark mode, and then every one of them is wrong.
Drills
Answer fast — trust the rule.
Which widget provides an app bar, body and floating action button for a Material page?
How do you make every Material button in Sprout green?
Which widget set imitates the iOS look?
Your custom card needs the app's primary colour. Best way to get it?
Remember
- Material for Google's look, Cupertino for Apple's; theme once, not per widget.
- Shortcut: if every widget of a kind should match, it belongs in the theme.
- Trap: hard-coded colours scattered across widgets.