Material and Cupertino
- Flutter course
- Beginner
- Lesson 14/99
- 4 min
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')),
)Practice Print visual languages
In main, print two lines with print: Material google and Cupertino apple.
Starter code
void main() {
// iki satır yazdır:
// Material google
// Cupertino apple
}Sample solution
void main() {
print('Material google');
print('Cupertino apple');
}Expected output
Material google Cupertino apple
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which platform's visual language does the Cupertino widget set mimic?
- Windows
- iOS Correct answer
- Android
- Linux
Explanation: Cupertino is the widget set that mimics Apple's iOS visual language.
2 iOS visual language
final app = ____App(home: Text('iOS stili'));final app = CupertinoApp(home: Text('iOS stili'));Explanation: For the iOS visual language, CupertinoApp is used.
3 Visual languages
| Term | Meaning |
|---|---|
Material |
Google's design language |
Cupertino |
Apple's iOS design language |
AppBar |
Material app bar |
CupertinoNavigationBar |
iOS navigation bar |