Что такое Material и Cupertino виджеты?

Question

Accepted Answer

Flutter предоставляет две основные системы дизайна в виде наборов виджетов: **Material** (Material Design от Google, стиль Android) и **Cupertino** (стиль iOS). Они позволяют создавать пользовательские интерфейсы, соответствующие языку дизайна каждой платформы, или единообразный пользовательский вид.

## Material виджеты (Material Design)

```dart
// Material widgets follow Google's Material Design (Android look, but usable anywhere)
MaterialApp(                       // the app root for Material apps
  home: Scaffold(                  // Material page structure
    appBar: AppBar(title: Text('Material')),
    body: Center(
      child: ElevatedButton(       // Material button
        onPressed: () {},
        child: Text('Material Button'),
      ),
    ),
    floatingActionButton: FloatingActionButton(onPressed: () {}),
  ),
)
// Material widgets: Scaffold, AppBar, ElevatedButton, Card, FloatingActionButton, etc.
```

## Cupertino виджеты (стиль iOS)

```dart
// Cupertino widgets follow Apple's iOS design language
CupertinoApp(
  home: CupertinoPageScaffold(
    navigationBar: CupertinoNavigationBar(middle: Text('iOS')),
    child: Center(
      child: CupertinoButton(      // iOS-style button
        onPressed: () {},
        child: Text('iOS Button'),
      ),
    ),
  ),
)
// Cupertino widgets: CupertinoButton, CupertinoNavigationBar, CupertinoPicker, etc.
```

## Выбор и адаптивный под платформу пользовательский интерфейс

```text
→ MATERIAL → most common default; works on all platforms; Google's design system
→ CUPERTINO → for an authentic iOS look
→ Many apps just use Material everywhere (consistent, simpler) — Flutter draws its own
  UI, so Material works fine on iOS too
→ PLATFORM-ADAPTIVE → use Material on Android, Cupertino on iOS (native feel per platform)
  — more effort; choose based on whether platform-native look matters
```

## Почему это важно

Понимание Material и Cupertino виджетов ценно, потому что они являются двумя основными системами дизайна Flutter, предоставляя виджеты, используемые для создания пользовательских интерфейсов приложений, поэтому это полезные фундаментальные знания. **Material виджеты** (реализующие Material Design от Google, язык дизайна в стиле Android) являются наиболее распространённым по умолчанию и включают основные виджеты, используемые в большинстве приложений Flutter (Scaffold для структуры страницы, AppBar, кнопки, Cards, FloatingActionButton) — их понимание необходимо, так как большинство приложений Flutter используют Material. **Cupertino виджеты** (реализующие язык дизайна iOS от Apple) позволяют создавать аутентичные интерфейсы в стиле iOS.

Понимание обоих и **как выбирать**, имеет практическую ценность: многие приложения просто **используют Material везде** (последовательно и проще, и так как Flutter рисует собственный пользовательский интерфейс, Material прекрасно работает даже на iOS), в то время как приложения, желающие **внешний вид нативных платформ**, могут использовать **подход, адаптивный к платформе** (Material на Android, Cupertino на iOS, давая каждой платформе её нативный вид за счёт большего количества работы).

Понимание этого выбора — последовательный Material везде (проще) в сравнении с адаптивным под платформу (нативный вид для каждой платформы) — отражает реальное решение при разработке на Flutter.

Знание доступных наборов виджетов и их систем дизайна является фундаментальным для создания пользовательских интерфейсов, которые выглядят уместно, будь то соответствие соглашениям платформы или представление единообразного пользовательского дизайна.

Поскольку создание пользовательских интерфейсов Flutter требует использования этих наборов виджетов (Material является распространённым по умолчанию, Cupertino для стилизации iOS) и понимание их и выбора между единообразным и адаптивным под платформу дизайном полезно для создания приложений с уместным внешним видом, понимание Material и Cupertino виджетов является ценным фундаментальным знанием Flutter — необходимым для создания пользовательских интерфейсов (особенно повсеместных Material виджетов) и полезным для принятия правильных решений о внешнем виде приложения и соглашениях платформы, практический аспект повседневной разработки пользовательского интерфейса Flutter.