enumでswitchする

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

ギャラリーでは、スマートフォンでは1行に写真を2枚、タブレットでは4枚表示します。ifとelseを書くこともできますが、enumの各値にそれぞれ個別の処理が必要な場合は、switchのほうが読みやすくなります。

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

Dartはtypeを確認し、一致するcaseの下にある行だけを実行します。その後、閉じ波括弧の後から処理を続けます。

宣言時点ではcolumnsに値がありません。すべてのcaseで値が設定されるため、これは問題ありません。Dartはenumのすべての値にcaseがあるか確認します。どれか1つでも抜けていると、欠けている値を示すエラーが発生し、コードはコンパイルされません。

チャレンジ

簡単

グリッドは常に2列です。returnの前にint columns;を宣言し、typeに対するswitchで設定します。スマートフォンでは2、タブレットでは4にします。次に、グリッドのcrossAxisCountとしてcolumnsを使用します。

自分で試してみよう

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