Switch com um Enum

Parte da seção Layouts que se adaptam do Journey de Flutter da Coddy. Lição 19 de 30.

Uma galeria deve mostrar 2 fotos por linha em um celular e 4 em um tablet. Você poderia escrever if e else, mas, quando cada valor de uma enum precisa de uma resposta própria, um switch fica mais claro:

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

Dart verifica type e executa as linhas abaixo do case correspondente, e somente essas. Em seguida, continua depois da chave de fechamento.

columns não tem valor quando é declarada. Isso é permitido porque cada caso atribui um valor a ela. Dart verifica se cada valor da enum tem um caso: deixe um de fora e o código não compila, com um erro que identifica o valor ausente.

Desafio

Fácil

A grade sempre tem 2 colunas. Antes do return, declare int columns; e defina seu valor com um switch em type: 2 em um celular, 4 em um tablet. Em seguida, use columns como crossAxisCount da grade.

Experimente você mesmo

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