Espressioni switch

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

Uno switch che sceglie solo un valore può essere scritto in forma più breve, come espressione switch. Restituisce un valore che memorizzi direttamente:

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

Ogni riga contiene un valore dell'enum, una freccia => e il risultato corrispondente, e termina con una virgola. Non ci sono né case né assegnazioni, e l'intero switch termina con ; perché è un'unica istruzione.

Un'espressione switch deve avere una risposta per ogni valore. Aggiungi un valore all'enum e ogni switch su di esso che non contiene una riga per quel valore non verrà più compilato, mostrando un errore che indica il caso mancante. Dart ti mostra ogni punto da aggiornare.

Sfida

Medio

Aggiungi un layout per desktop alla galleria:

aggiungi desktop a enum ScreenType
imposta type su ScreenType.desktop quando la larghezza è pari o superiore a 1000
sostituisci l'istruzione switch con un'espressione switch che restituisca 2, 4 e 6 colonne

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