Выражения switch

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

switch, который только выбирает значение, можно записать короче — как выражение switch. Оно возвращает значение, которое можно сохранить напрямую:

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

Каждая строка содержит значение перечисления, стрелку => и соответствующий ему результат и заканчивается запятой. Здесь нет case и присваивания, а вся конструкция switch заканчивается на ;, потому что это одна инструкция.

У выражения switch должен быть ответ для каждого значения. Добавьте значение в перечисление — и компиляция каждого switch для этого перечисления, в котором нет строки для нового значения, завершится ошибкой с указанием на пропущенный вариант. Dart показывает, какие места нужно обновить.

Задание

Средне

Добавь макет для компьютеров в галерею:

добавь desktop в enum ScreenType
установи type в ScreenType.desktop, если ширина равна 1000 или больше
замени оператор switch на switch-выражение, которое задаёт 2, 4 и 6 столбцов

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

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