Expressões switch

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

Um switch que apenas escolhe um valor pode ser escrito de forma mais curta, como uma expressão switch. Ela retorna um valor que você armazena diretamente:

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

Cada linha contém um valor do enum, uma seta => e o resultado correspondente, terminando com uma vírgula. Não há case nem atribuição, e o switch inteiro termina com ; porque é uma instrução.

Uma expressão switch precisa ter uma resposta para cada valor. Adicione um valor ao enum, e toda instrução switch sobre ele que não tiver uma linha para esse valor deixará de compilar, com um erro indicando o case ausente. O Dart mostra cada lugar que precisa ser atualizado.

Desafio

Médio

Adicione um layout para desktop à galeria:

adicione desktop a enum ScreenType
defina type como ScreenType.desktop quando a largura for 1000 ou mais
substitua a instrução switch por uma expressão switch que forneça 2, 4 e 6 colunas

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