What is the difference between Cupertino and Material Design in Flutter?

Overview

Flutter supports two design languages: Material Design (Google's design system) and Cupertino (Apple's iOS design system). You can use either — or mix both — in a Flutter app.

Key Differences

MaterialApp

CupertinoApp

ElevatedButton

CupertinoButton

AppBar

CupertinoNavigationBar

BottomNavigationBar

CupertinoTabBar

AlertDialog

CupertinoAlertDialog

Switch

CupertinoSwitch

Slider

CupertinoSlider

CircularProgressIndicator

CupertinoActivityIndicator

DropdownButton

CupertinoPicker

Material Example

dartCopy
MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text('Material')),
    body: Center(
      child: ElevatedButton(
        onPressed: () {},
        child: Text('Material Button'),
      ),
    ),
  ),
)

Cupertino Example

dartCopy
CupertinoApp(
  home: CupertinoPageScaffold(
    navigationBar: CupertinoNavigationBar(
      middle: Text('Cupertino'),
    ),
    child: Center(
      child: CupertinoButton(
        onPressed: () {},
        child: Text('iOS Button'),
      ),
    ),
  ),
)

Mixing Both (Adaptive Widgets)

Flutter provides adaptive widgets that automatically use the right style per platform:

dartCopy
// Adaptive switch — renders Material on Android, Cupertino on iOS
Switch.adaptive(
  value: _isOn,
  onChanged: (val) => setState(() => _isOn = val),
)

// Check platform manually
import 'dart:io' show Platform;

Widget buildButton() {
  if (Platform.isIOS) {
    return CupertinoButton(onPressed: () {}, child: Text('iOS'));
  }
  return ElevatedButton(onPressed: () {}, child: Text('Android'));
}

Adaptive Widgets Available

Switch

Switch.adaptive

Slider

Slider.adaptive

CircularProgressIndicator

CircularProgressIndicator.adaptive

AlertDialog

AlertDialog.adaptive

Checkbox

Checkbox.adaptive

When to Use Which?

Recommendation: Use Material for most Flutter apps as it provides better cross-platform consistency. Add specific Cupertino widgets when you need iOS-native look for particular components.