switch式

CoddyのFlutterジャーニー「画面サイズに合わせたレイアウト」セクションの一部。レッスン 20/30。

値を選ぶだけのswitchは、switch式として短く書けます。値を返すので、その値を直接格納できます。

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

各行は列挙型の値、矢印=>、その値に対する結果で構成され、末尾にカンマを付けます。caseも代入もなく、switch全体は1つの文なので;で終わります。

switch式では、すべての値に対する答えが必要です。列挙型に値を追加すると、その値に対応する行がないswitchはコンパイルできなくなり、欠けているcaseを示すエラーが表示されます。Dartは、更新が必要な箇所をすべて教えてくれます。

チャレンジ

中級

ギャラリーにデスクトップ用レイアウトを追加します。

enum ScreenTypeにdesktopを追加する
幅が1000以上の場合、typeをScreenType.desktopに設定する
switch文を、列数を2、4、6にするswitch式に置き換える

自分で試してみよう

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