Quali sono i widget Material e Cupertino?

Question

Accepted Answer

Flutter fornisce due principali sistemi di design come insiemi di widget: **Material** (Material Design di Google, stile Android) e **Cupertino** (stile iOS). Ti permettono di costruire UI che corrispondono al linguaggio di design di ciascuna piattaforma, o un aspetto personalizzato coerente.

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

## Widget Cupertino (stile 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.
```

## Scegliere e UI adattive alla piattaforma

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

## Perché è importante

Comprendere i widget Material e Cupertino è prezioso perché sono i due principali sistemi di design di Flutter, fornendo i widget utilizzati per costruire le UI dell'app, quindi è una conoscenza fondamentale utile. I **widget Material** (che implementano Material Design di Google, il linguaggio di design in stile Android) sono il default più comune e includono widget essenziali utilizzati nella maggior parte delle app Flutter (Scaffold per la struttura della pagina, AppBar, pulsanti, Cards, FloatingActionButton) — comprenderli è necessario poiché la maggior parte delle app Flutter utilizza Material. I **widget Cupertino** (che implementano il linguaggio di design iOS di Apple) ti permettono di costruire interfacce autenticamente nello stile iOS.

Comprendere entrambi, e **come scegliere**, è praticamente prezioso: molte app semplicemente **usano Material ovunque** (coerente e più semplice, e poiché Flutter disegna la propria UI, Material funziona bene anche su iOS), mentre le app che desiderano **aspetti nativi della piattaforma** possono utilizzare un **approccio adattivo alla piattaforma** (Material su Android, Cupertino su iOS, dando a ciascuna piattaforma il suo aspetto nativo al costo di maggiore sforzo).

Comprendere questa scelta — Material coerente ovunque (più semplice) rispetto a adattivo alla piattaforma (aspetto nativo per piattaforma) — riflette una vera decisione di design nello sviluppo Flutter.

Conoscere gli insiemi di widget disponibili e i loro sistemi di design è fondamentale per costruire UI che abbiano un aspetto appropriato, che si tratti di corrispondere alle convenzioni di una piattaforma o di presentare un design personalizzato coerente.

Poiché la costruzione di UI Flutter richiede l'utilizzo di questi insiemi di widget (Material essendo il default comune, Cupertino per lo stile iOS) e comprenderli e la scelta tra design coerente e adattivo alla piattaforma è utile per creare app dall'aspetto appropriato, comprendere i widget Material e Cupertino è una conoscenza Flutter fondamentale e preziosa — necessaria per costruire UI (soprattutto gli onnipresenti widget Material) e utile per prendere decisioni consapevoli sull'aspetto dell'app e le convenzioni della piattaforma, un aspetto pratico dello sviluppo quotidiano delle UI Flutter.