switch-Ausdrücke

Teil des Abschnitts Layouts für jede Bildschirmgröße der Flutter-Journey von Coddy. Lektion 20 von 30.

Ein switch, das nur einen Wert auswählt, kann kürzer als switch expression geschrieben werden. Es gibt einen Wert zurück, den du direkt speicherst:

final columns = switch (type) {
  ScreenType.phone => 2,
  ScreenType.tablet => 4,
};

Jede Zeile enthält einen Wert des Enums, einen Pfeil => und das Ergebnis dafür und endet mit einem Komma. Es gibt kein case und keine Zuweisung, und der gesamte Switch endet mit ;, weil er eine Anweisung ist.

Ein Switch-Ausdruck muss für jeden Wert eine Antwort haben. Fügst du dem Enum einen Wert hinzu, lässt sich jeder Switch darüber, für den keine Zeile dafür vorhanden ist, nicht mehr kompilieren; es erscheint ein Fehler, der auf den fehlenden Fall hinweist. Dart zeigt dir jede Stelle, die aktualisiert werden muss.

Aufgabe

Mittel

Füge der Galerie ein Desktop-Layout hinzu:

Füge desktop zu enum ScreenType hinzu
Setze type auf ScreenType.desktop, wenn die Breite 1000 oder mehr beträgt
Ersetze die switch-Anweisung durch einen switch-Ausdruck, der 2, 4 und 6 Spalten liefert

Probier es selbst

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

enum ScreenType { phone, tablet }

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    var type = ScreenType.phone;
    if (width >= 600) {
      type = ScreenType.tablet;
    }
    int columns;
    switch (type) {
      case ScreenType.phone:
        columns = 2;
      case ScreenType.tablet:
        columns = 4;
    }
    final photos = ['Beach', 'Forest', 'City', 'Desert', 'Lake', 'Snow', 'Island', 'Canyon'];
    return Scaffold(
      appBar: AppBar(title: Text('Gallery: ${type.name}')),
      body: GridView.count(
        crossAxisCount: columns,
        children: [
          for (final photo in photos)
            Container(
              margin: const EdgeInsets.all(4),
              color: Colors.cyan.shade100,
              child: Center(child: Text(photo)),
            ),
        ],
      ),
    );
  }
}