switch pada Enum

Termasuk bagian Layout yang Menyesuaikan dalam perjalanan Flutter di Coddy. Pelajaran 19 dari 30.

Galeri sebaiknya menampilkan 2 foto dalam satu baris di ponsel dan 4 foto di tablet. Kamu bisa menulis if dan else, tetapi ketika setiap nilai enum memerlukan jawaban tersendiri, switch lebih mudah dibaca:

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

Dart memeriksa type dan menjalankan baris-baris di bawah case yang cocok, hanya baris-baris itu. Setelah itu, program melanjutkan setelah kurung kurawal penutup.

columns belum memiliki nilai saat dideklarasikan. Hal itu diperbolehkan karena setiap case memberinya nilai. Dart memeriksa bahwa setiap nilai enum memiliki case: jika satu case terlewat, kode tidak bisa dikompilasi dan error akan menyebutkan nilai yang hilang.

Tantangan

Mudah

Grid selalu memiliki 2 kolom. Sebelum return, deklarasikan int columns; dan tetapkan nilainya dengan switch pada type: 2 untuk ponsel, 4 untuk tablet. Lalu gunakan columns sebagai crossAxisCount pada grid.

Coba sendiri

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