Was sind Material- und Cupertino-Widgets?

Question

Accepted Answer

Flutter bietet zwei Hauptdesign-Systeme als Widget-Sätze: **Material** (Googles Material Design, Android-Stil) und **Cupertino** (iOS-Stil). Sie ermöglichen es dir, UIs zu erstellen, die der Design-Sprache jeder Plattform entsprechen, oder ein konsistentes, benutzerdefiniertes Design zu verwenden.

## Material-Widgets (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-Widgets (iOS-Stil)

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

## Auswahl und plattformadaptive UI

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

## Warum es wichtig ist

Das Verständnis von Material- und Cupertino-Widgets ist wertvoll, da sie Flutters zwei Hauptdesign-Systeme sind und die Widgets bereitstellen, die zum Erstellen von App-UIs verwendet werden – daher ist es nützliches Grundlagenwissen. **Material-Widgets** (implementieren Googles Material Design, die Android-Stil-Design-Sprache) sind die am häufigsten verwendete Standard-Option und enthalten wesentliche Widgets, die in den meisten Flutter-Apps verwendet werden (Scaffold für Seitenstruktur, AppBar, Buttons, Cards, FloatingActionButton) – ihr Verständnis ist notwendig, da die Mehrheit der Flutter-Apps Material verwendet. **Cupertino-Widgets** (implementieren Apples iOS-Design-Sprache) ermöglichen es dir, authentisch aussehende iOS-Schnittstellen zu erstellen.

Das Verständnis beider Systeme und **wie man wählt**, ist praktisch wertvoll: viele Apps verwenden einfach **Material überall** (konsistent und einfacher, und da Flutter seine eigene UI zeichnet, funktioniert Material auch auf iOS gut), während Apps, die **native Aussehen** wünschen, einen **plattformadaptiven Ansatz** verwenden können (Material auf Android, Cupertino auf iOS, wodurch jede Plattform ihr natives Aussehen erhält, allerdings mit mehr Aufwand).

Das Verständnis dieser Wahl – konsistentes Material überall (einfacher) versus plattformadaptiv (natives Aussehen pro Plattform) – spiegelt eine echte Design-Entscheidung in der Flutter-Entwicklung wider.

Die Kenntnis der verfügbaren Widget-Sätze und ihrer Design-Systeme ist grundlegend für das Erstellen von UIs, die angemessen aussehen, unabhängig davon, ob sie den Konventionen einer Plattform entsprechen oder ein konsistentes benutzerdefiniertes Design präsentieren.

Da das Erstellen von Flutter-UIs die Verwendung dieser Widget-Sätze erfordert (Material ist die häufige Standard-Option, Cupertino für iOS-Styling) und das Verständnis von ihnen und der Wahl zwischen konsistentesm versus plattformadaptivem Design nützlich ist, um angemessen aussehende Apps zu erstellen, ist das Verständnis von Material- und Cupertino-Widgets wertvoll, grundlegendes Flutter-Wissen – notwendig zum Erstellen von UIs (besonders der allgegenwärtigen Material-Widgets) und nützlich für fundierte Entscheidungen über das App-Aussehen und Plattformkonventionen, ein praktischer Aspekt der alltäglichen Flutter-UI-Entwicklung.