Usare switch con un enum

Fa parte della sezione Layout adattabili del percorso Flutter di Coddy. Lezione 19 di 30.

Una galleria dovrebbe mostrare 2 foto per riga su un telefono e 4 su un tablet. Potresti scrivere if e else, ma quando ogni valore di un enum richiede una risposta specifica, un switch è più leggibile:

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

Dart controlla type ed esegue le righe sotto il case corrispondente, e solo quelle. Poi prosegue dopo la parentesi graffa di chiusura.

columns non ha alcun valore quando viene dichiarata. È consentito perché ogni case le assegna un valore. Dart verifica che ogni valore dell’enum abbia un case: se ne ometti uno, il codice non viene compilato e viene visualizzato un errore che indica il valore mancante.

Sfida

Facile

La griglia ha sempre 2 colonne. Prima di return, dichiara int columns; e impostala con uno switch su type: 2 su un telefono, 4 su un tablet. Poi usa columns come crossAxisCount della griglia.

Provalo tu

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)),
            ),
        ],
      ),
    );
  }
}