Flutter Cupertino (iOS Style)

Creating native iOS-looking apps with Cupertino widgets

🍎 What is Cupertino?

Cupertino widgets implement Apple's iOS design language in Flutter. These widgets provide native iOS look and feel, including smooth animations, iOS-style navigation, and familiar interface elements that iOS users expect, making your app feel right at home on Apple devices. 


import 'package:flutter/cupertino.dart';

void main() {
  runApp(CupertinoApp(
    home: CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('iOS Style'),
      ),
      child: Center(child: Text('Hello iOS!')),
    ),
  ));
}

Output:

iOS Style
Hello iOS!

Core Cupertino Widgets

📱

CupertinoPageScaffold

Basic iOS page structure 

CupertinoPageScaffold(
  navigationBar: CupertinoNavigationBar(
    middle: Text('Title'),
  ),
  child: Center(child: Text('Content')),
)
🔘

CupertinoButton

iOS-style buttons 

CupertinoButton(
  color: CupertinoColors.activeBlue,
  onPressed: () {},
  child: Text('Tap Me'),
)
🔄

CupertinoSwitch

iOS toggle switch 

CupertinoSwitch(
  value: true,
  onChanged: (bool value) {
    // Handle change
  },
)
📝

CupertinoTextField

iOS text input 

CupertinoTextField(
  placeholder: 'Enter text',
  padding: EdgeInsets.all(12),
)

🔹 Cupertino App Structure

Building an iOS-style app with CupertinoApp: 

import 'package:flutter/cupertino.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'iOS Style App',
      theme: CupertinoThemeData(
        primaryColor: CupertinoColors.activeBlue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Home'),
      ),
      child: Center(
        child: Text('Welcome to iOS Design!'),
      ),
    );
  }
}

Output:

Home
Welcome to iOS Design!

🔹 Cupertino Buttons

iOS-style buttons with different styles: 

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    // Filled button
    CupertinoButton.filled(
      onPressed: () {},
      child: Text('Filled Button'),
    ),
    SizedBox(height: 10),
    
    // Regular button
    CupertinoButton(
      color: CupertinoColors.activeBlue,
      onPressed: () {},
      child: Text('Regular Button'),
    ),
    SizedBox(height: 10),
    
    // Borderless button
    CupertinoButton(
      onPressed: () {},
      child: Text('Borderless Button'),
    ),
  ],
)

Output:



🔹 CupertinoTabScaffold

iOS-style bottom tab navigation: 

CupertinoTabScaffold(
  tabBar: CupertinoTabBar(
    items: [
      BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.search),
        label: 'Search',
      ),
      BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.settings),
        label: 'Settings',
      ),
    ],
  ),
  tabBuilder: (context, index) {
    return CupertinoTabView(
      builder: (context) {
        return Center(child: Text('Tab $index'));
      },
    );
  },
)

Output:

Tab 0
🏠
Home
🔍
Search
⚙️
Settings

🔹 Cupertino Dialogs

iOS-style alert dialogs: 

showCupertinoDialog(
  context: context,
  builder: (context) => CupertinoAlertDialog(
    title: Text('Alert'),
    content: Text('This is an iOS-style alert'),
    actions: [
      CupertinoDialogAction(
        child: Text('Cancel'),
        onPressed: () => Navigator.pop(context),
      ),
      CupertinoDialogAction(
        isDefaultAction: true,
        child: Text('OK'),
        onPressed: () => Navigator.pop(context),
      ),
    ],
  ),
)

Output:

Alert
This is an iOS-style alert

🧠 Test Your Knowledge

Which widget is used for iOS-style app structure?