Usar switch con una enumeración

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

Una galería debería mostrar 2 fotos por fila en un teléfono y 4 en una tableta. Podrías escribir if y else, pero cuando cada valor de una enumeración necesita su propia respuesta, un switch se lee mejor:

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

Dart evalúa type y ejecuta las líneas bajo el case que coincide, y solo esas. Después continúa tras la llave de cierre.

columns no tiene ningún valor cuando se declara. Eso está permitido porque cada caso le asigna uno. Dart comprueba que cada valor de la enumeración tenga un case: si omites uno, el código no se compila y aparece un error que indica el valor que falta.

Desafío

Fácil

La cuadrícula siempre tiene 2 columnas. Antes de return, declara int columns; y asígnale un valor con un switch sobre type: 2 en un teléfono y 4 en una tableta. Después, usa columns como crossAxisCount de la cuadrícula.

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