열거형에 switch 적용하기

Coddy Flutter 여정의 화면 크기에 맞는 레이아웃 섹션에 포함된 레슨. 30개 중 19번째.

갤러리는 휴대전화에서는 한 행에 사진 2장을, 태블릿에서는 4장을 보여 줘야 합니다. if와 else를 작성할 수도 있지만, 열거형의 각 값에 서로 다른 답이 필요할 때는 switch를 사용하는 편이 더 읽기 쉽습니다.

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

Dart는 type을 확인하고 일치하는 case 아래의 줄만 실행합니다. 그런 다음 닫는 중괄호 다음으로 계속 진행합니다.

columns는 선언될 때 값이 없습니다. 모든 case에서 값을 지정하므로 괜찮습니다. Dart는 열거형의 모든 값에 해당하는 case가 있는지 확인합니다. 하나라도 빠뜨리면 코드가 컴파일되지 않으며, 누락된 값을 알려 주는 오류가 발생합니다.

챌린지

쉬움

그리드에는 항상 열이 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)),
            ),
        ],
      ),
    );
  }
}