Что такое Cupertino?

Cupertino в Flutter

Что такое Cupertino

Cupertino — это набор компонентов Flutter, которые следуют дизайн-языку Apple (iOS design language). Название происходит от Cupertino, Калифорния — место, где находится штаб-квартира Apple.

Это одна из двух основных UI библиотек в Flutter:

• Material Design — для Android (Google)
• Cupertino Design — для iOS (Apple)

Material vs Cupertino

// Material Design (Android-like)
import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Home')),
        body: Center(child: Text('Hello')),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

// Cupertino Design (iOS-like)
import 'package:flutter/cupertino.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(middle: Text('Home')),
        child: SafeArea(child: Center(child: Text('Hello'))),
      ),
    );
  }
}

Основные Cupertino компоненты

CupertinoApp

CupertinoApp(
  title: 'My App',
  theme: CupertinoThemeData(
    primaryColor: CupertinoColors.activeBlue,
    textTheme: CupertinoTextThemeData(
      navLargeTitleTextStyle: TextStyle(fontSize: 34),
    ),
  ),
  home: HomePage(),
)

CupertinoPageScaffold

Аналог Material Scaffold, но для iOS:

CupertinoPageScaffold(
  navigationBar: CupertinoNavigationBar(
    middle: Text('Profile'),
    leading: CupertinoButton(
      onPressed: () => Navigator.pop(context),
      child: Icon(CupertinoIcons.back),
    ),
  ),
  child: Center(child: Text('Page content')),
)

CupertinoButton

Кнопка в стиле iOS:

// Обычная кнопка
CupertinoButton(
  onPressed: () {},
  child: Text('Tap me'),
)

// Заполненная кнопка
CupertinoButton.filled(
  onPressed: () {},
  child: Text('Save'),
)

CupertinoNavigationBar

Top bar в стиле iOS:

CupertinoNavigationBar(
  middle: Text('Settings'),
  leading: GestureDetector(
    onTap: () => Navigator.pop(context),
    child: Icon(CupertinoIcons.back),
  ),
  trailing: Icon(CupertinoIcons.ellipsis),
)

CupertinoTabBar

Bottom tab bar в стиле iOS:

CupertinoTabScaffold(
  tabBar: CupertinoTabBar(
    items: <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.search),
        label: 'Search',
      ),
    ],
  ),
  tabBuilder: (context, index) {
    switch (index) {
      case 0:
        return HomePage();
      case 1:
        return SearchPage();
      default:
        return Container();
    }
  },
)

CupertinoAlert

Alert dialog в стиле iOS:

showCupertinoDialog(
  context: context,
  builder: (context) => CupertinoAlertDialog(
    title: Text('Confirm'),
    content: Text('Are you sure?'),
    actions: <CupertinoDialogAction>[
      CupertinoDialogAction(
        onPressed: () => Navigator.pop(context),
        child: Text('Cancel'),
      ),
      CupertinoDialogAction(
        isDestructiveAction: true,  // красная кнопка
        onPressed: () => Navigator.pop(context),
        child: Text('Delete'),
      ),
    ],
  ),
)

CupertinoPickerDialog

Picker для выбора значений (даты, время, список):

showCupertinoModalPopup(
  context: context,
  builder: (context) => Container(
    height: 300,
    child: CupertinoPicker(
      itemExtent: 32,
      onSelectedItemChanged: (int value) {
        setState(() => selectedValue = value);
      },
      children: List<Widget>.generate(
        10,
        (i) => Center(child: Text('Item $i')),
      ),
    ),
  ),
)

CupertinoSwitch

Тоггл переключатель в стиле iOS:

CupertinoSwitch(
  value: isEnabled,
  onChanged: (value) {
    setState(() => isEnabled = value);
  },
)

CupertinoTextField

Текстовое поле в стиле iOS:

CupertinoTextField(
  placeholder: 'Enter name',
  onChanged: (value) => name = value,
  prefixIcon: Icon(CupertinoIcons.person),
  suffix: Icon(CupertinoIcons.clear),
)

Различия в поведении Material vs Cupertino

Адаптивный дизайн — best practices

import 'package:flutter/foundation.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class AdaptiveApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // На iOS показываем Cupertino, на Android Material
    if (defaultTargetPlatform == TargetPlatform.iOS) {
      return CupertinoApp(
        home: CupertinoHome(),
      );
    } else {
      return MaterialApp(
        home: MaterialHome(),
      );
    }
  }
}

Или адаптивные компоненты:

widget = defaultTargetPlatform == TargetPlatform.iOS
    ? CupertinoButton(onPressed: onClick, child: Text('OK'))
    : ElevatedButton(onPressed: onClick, child: Text('OK'));

Когда использовать Cupertino

• Приложение только для iOS — используй Cupertino полностью
• Cross-platform приложение — используй Material, но позволь гибкость под iOS (или наоборот)
• Нужна максимальная близость к native experience — Cupertino на iOS

История и контекст

Название Cupertino пришло из того, что Apple находится в Cupertino, CA. Flutter разработчики назвали так iOS компоненты как дань уважения и признание того, что это iOS design language.

Это один из способов, как Flutter поддерживает платформоспецифичный дизайн — не пытается заставить Material на iOS, а предоставляет native-like компоненты.

Итог

Cupertino — это Flutter-реализация iOS дизайн языка. Если разрабатываешь под iOS, используй Cupertino для лучшего UX. Если кросс-платформа — выбирай между Material/Cupertino в зависимости от платформы.