switch mit einem Enum

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

Eine Galerie sollte auf einem Smartphone 2 Fotos pro Zeile und auf einem Tablet 4 anzeigen. Du könntest if und else schreiben, aber wenn jeder Wert einer Enum einen eigenen Fall braucht, ist ein switch übersichtlicher:

int columns;
switch (type) {
  case ScreenType.phone:
    columns = 2;
  case ScreenType.tablet:
    columns = 4;
}

Dart prüft type und führt nur die Zeilen unter dem passenden case aus. Danach macht es nach der schließenden Klammer weiter.

columns hat bei der Deklaration keinen Wert. Das ist zulässig, weil jeder Fall ihm einen zuweist. Dart prüft, ob jeder Wert der Enum einen Fall hat: Lässt du einen aus, wird der Code nicht kompiliert und es erscheint ein Fehler, der den fehlenden Wert nennt.

Aufgabe

Einfach

Das Raster hat immer 2 Spalten. Deklariere vor return int columns; und weise der Variablen mithilfe eines switch für type einen Wert zu: 2 auf einem Smartphone, 4 auf einem Tablet. Verwende dann columns als crossAxisCount des Rasters.

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;
    }
    final photos = ['Beach', 'Forest', 'City', 'Desert', 'Lake', 'Snow', 'Island', 'Canyon'];
    return Scaffold(
      appBar: AppBar(title: Text('Gallery: ${type.name}')),
      body: GridView.count(
        crossAxisCount: 2,
        children: [
          for (final photo in photos)
            Container(
              margin: const EdgeInsets.all(4),
              color: Colors.cyan.shade100,
              child: Center(child: Text(photo)),
            ),
        ],
      ),
    );
  }
}