O que são widgets Material e Cupertino?

Question

Accepted Answer

Flutter fornece dois sistemas de design principais como conjuntos de widgets: **Material** (Material Design do Google, estilo Android) e **Cupertino** (estilo iOS). Eles permitem construir interfaces que correspondem à linguagem de design de cada plataforma, ou uma aparência personalizada consistente.

## Widgets 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.
```

## Widgets Cupertino (estilo 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.
```

## Escolhendo e interface adaptável à plataforma

```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
```

## Por que isso importa

Compreender os widgets Material e Cupertino é valioso porque são os dois principais sistemas de design do Flutter, fornecendo os widgets usados para construir interfaces de aplicativos, portanto é conhecimento fundamental útil. **Widgets Material** (implementando o Material Design do Google, a linguagem de design estilo Android) são o padrão mais comum e incluem widgets essenciais usados na maioria dos aplicativos Flutter (Scaffold para estrutura de página, AppBar, botões, Cards, FloatingActionButton) — compreendê-los é necessário, pois a maioria dos aplicativos Flutter usa Material. **Widgets Cupertino** (implementando a linguagem de design iOS da Apple) permitem construir interfaces autenticamente com aparência iOS.

Compreender ambos, e **como escolher**, é praticamente valioso: muitos aplicativos simplesmente **usam Material em todos os lugares** (consistente e mais simples, e como Flutter desenha sua própria interface, Material funciona bem até no iOS), enquanto aplicativos que desejam **aparências nativas da plataforma** podem usar uma **abordagem adaptável à plataforma** (Material no Android, Cupertino no iOS, dando a cada plataforma sua aparência nativa ao custo de mais esforço).

Compreender essa escolha — Material consistente em todos os lugares (mais simples) versus adaptável à plataforma (aparência nativa por plataforma) — reflete uma decisão de design real no desenvolvimento Flutter.

Saber quais conjuntos de widgets estão disponíveis e seus sistemas de design é fundamental para construir interfaces que pareçam apropriadas, seja correspondendo às convenções de uma plataforma ou apresentando um design personalizado consistente.

Pois construir interfaces Flutter requer usar esses conjuntos de widgets (Material sendo o padrão comum, Cupertino para estilo iOS) e compreendê-los e a escolha entre design consistente versus adaptável à plataforma é útil para criar aplicativos com aparência apropriada, compreender widgets Material e Cupertino é conhecimento Flutter valioso e fundamental — necessário para construir interfaces (especialmente os ubíquos widgets Material) e útil para tomar decisões sólidas sobre aparência do aplicativo e convenções de plataforma, um aspecto prático do desenvolvimento diário de interface Flutter.