¿Qué son los widgets Material y Cupertino?

Question

Accepted Answer

Flutter proporciona dos sistemas de diseño principales como conjuntos de widgets: **Material** (Material Design de Google, estilo Android) y **Cupertino** (estilo iOS). Te permiten construir interfaces de usuario que coincidan con el lenguaje de diseño de cada plataforma, o un aspecto personalizado 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.
```

## Elegir y interfaz adaptativa por 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 qué es importante

Comprender los widgets Material y Cupertino es valioso porque son los dos principales sistemas de diseño de Flutter, proporcionando los widgets utilizados para construir interfaces de usuario de aplicaciones, por lo que es un conocimiento fundamental útil. Los **widgets Material** (que implementan Material Design de Google, el lenguaje de diseño estilo Android) son el predeterminado más común e incluyen widgets esenciales utilizados en la mayoría de las aplicaciones Flutter (Scaffold para la estructura de página, AppBar, botones, Cards, FloatingActionButton) — entenderlos es necesario ya que la mayoría de las aplicaciones Flutter usan Material. Los **widgets Cupertino** (que implementan el lenguaje de diseño iOS de Apple) te permiten construir interfaces que se ven auténticamente como iOS.

Comprender ambos, y **cómo elegir**, es prácticamente valioso: muchas aplicaciones simplemente **usan Material en todas partes** (consistente y más simple, y como Flutter dibuja su propia interfaz, Material funciona bien incluso en iOS), mientras que las aplicaciones que desean **aspecto nativo de plataforma** pueden usar un **enfoque adaptativo a la plataforma** (Material en Android, Cupertino en iOS, dando a cada plataforma su aspecto nativo al costo de más esfuerzo).

Comprender esta elección — Material consistente en todas partes (más simple) versus adaptativo a la plataforma (aspecto nativo por plataforma) — refleja una decisión de diseño real en el desarrollo con Flutter.

Conocer los conjuntos de widgets disponibles y sus sistemas de diseño es fundamental para construir interfaces de usuario que se vean apropiadas, ya sea coincidiendo con las convenciones de una plataforma o presentando un diseño personalizado consistente.

Ya que construir interfaces de usuario en Flutter requiere usar estos conjuntos de widgets (siendo Material el predeterminado común, Cupertino para estilos iOS) y entenderlos y la elección entre diseño consistente versus adaptativo a la plataforma es útil para crear aplicaciones que se vean apropiadas, entender los widgets Material y Cupertino es un conocimiento fundamental valioso de Flutter — necesario para construir interfaces de usuario (especialmente los omnipresentes widgets Material) y útil para tomar decisiones sólidas sobre la apariencia de la aplicación y las convenciones de plataforma, un aspecto práctico del desarrollo diario de interfaces de usuario en Flutter.