Expresiones switch

Parte de la sección Diseños que se adaptan del Journey de Flutter de Coddy. Lección 20 de 30.

Un switch que solo selecciona un valor puede escribirse de forma más breve como una expresión switch. Devuelve un valor que guardas directamente:

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

Cada línea contiene un valor de la enumeración, una flecha => y el resultado correspondiente, y termina con una coma. No hay ningún case ni asignación, y todo el switch termina con ; porque es una sola instrucción.

Una expresión switch debe tener una respuesta para cada valor. Añade un valor a la enumeración y cualquier switch sobre ella que no tenga una línea para ese valor dejará de compilar, con un error que señala el caso que falta. Dart te muestra cada lugar que debes actualizar.

Desafío

Intermedio

Añade un diseño para escritorio a la galería:

añade desktop a enum ScreenType
establece type en ScreenType.desktop cuando el ancho sea 1000 o más
reemplaza la instrucción switch por una expresión switch que proporcione 2, 4 y 6 columnas

Pruébalo tú mismo

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