Material and Cupertino

Learn the difference between Material and Cupertino widget sets.

Material and Cupertino

Flutter offers two main visual languages: Material and Cupertino. Material is Google's Material Design; native to Android but works on iOS too. Cupertino mimics Apple's iOS visual language; bottom navigation bars and page transitions follow the iOS style.

// Material
MaterialApp(home: Scaffold(appBar: AppBar()))

// Cupertino
CupertinoApp(home: CupertinoPageScaffold(
  navigationBar: CupertinoNavigationBar(),
))

Which set to choose?

Material is a familiar starting point across platforms and works on both Android and iOS. Cupertino is chosen only when an iOS-specific look is desired. Mixing both in one app is possible; most developers start with Material.

// Most apps start with Material
MaterialApp(
  title: 'My App',
  theme: ThemeData.light(),
  home: Scaffold(body: Text('Material')),
)

Exercise Print visual languages

In main, print two lines with print: Material google and Cupertino apple.

Show example solution

void main() {
  print('Material google');
  print('Cupertino apple');
}

Test yourself

Which platform's visual language does the Cupertino widget set mimic?
- Windows
- iOS
- Android
- Linux
Show answer

iOS — Cupertino is the widget set that mimics Apple's iOS visual language.

iOS visual language

final app = ____App(home: Text('iOS stili'));

Show answer

final app = CupertinoApp(home: Text('iOS stili'));

Visual languages

Material

Google's design language
Cupertino

Apple's iOS design language
AppBar

Material app bar
CupertinoNavigationBar

iOS navigation bar

Next lesson: Summary - Widget basics

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies