Конструкция switch с перечислением

Часть раздела Адаптивная компоновка путешествия по Flutter на Coddy. Урок 19 из 30.

Галерея должна показывать 2 фотографии в ряд на телефоне и 4 — на планшете. Можно написать if и else, но когда для каждого значения перечисления нужен свой ответ, switch читается лучше:

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

Dart проверяет type и выполняет строки под соответствующим case — и только их. Затем выполнение продолжается после закрывающей фигурной скобки.

У columns нет значения при объявлении. Это допустимо, потому что каждый вариант присваивает ему значение. Dart проверяет, что для каждого значения перечисления есть case: если пропустить один, код не скомпилируется, и ошибка укажет отсутствующее значение.

Задание

Легко

В сетке всегда 2 столбца. Перед return объяви int columns; и задай его с помощью switch по type: 2 для телефона, 4 для планшета. Затем используй columns в качестве crossAxisCount сетки.

Попробуйте сами

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