Dùng switch với enum

Thuộc phần Bố cục phù hợp với mọi màn hình trong hành trình Flutter của Coddy. Bài học 19 trên 30.

Một thư viện ảnh nên hiển thị 2 ảnh trên mỗi hàng khi xem bằng điện thoại và 4 ảnh khi xem bằng máy tính bảng. Bạn có thể viết if và else, nhưng khi mỗi giá trị của một enum cần có cách xử lý riêng, switch sẽ dễ đọc hơn:

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

Dart xem giá trị của type rồi chạy các dòng bên dưới case khớp với giá trị đó, và chỉ những dòng ấy. Sau đó, chương trình tiếp tục chạy sau dấu ngoặc nhọn đóng.

columns chưa có giá trị khi được khai báo. Điều đó được phép vì mỗi nhánh đều gán cho nó một giá trị. Dart kiểm tra để đảm bảo mỗi giá trị của enum đều có một case: nếu bỏ sót một giá trị, code sẽ không biên dịch và báo lỗi, nêu tên giá trị còn thiếu.

Thử thách

Dễ

Lưới luôn có 2 cột. Trước return, khai báo int columns; và dùng switch với type để gán giá trị: 2 trên điện thoại, 4 trên máy tính bảng. Sau đó dùng columns làm giá trị crossAxisCount của lưới.

Tự làm thử

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