Bir Enum üzerinde switch kullanımı

Coddy'nin Flutter Journey'sinin Her Ekrana Uyan Düzenler bölümünün bir parçası. Ders 19 / 30.

Bir galeri, telefonda yan yana 2 fotoğraf, tablette ise 4 fotoğraf göstermelidir. if ve else yazabilirsin, ancak bir enum değerinin her biri için ayrı bir yanıt gerekiyorsa switch daha anlaşılır olur:

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

Dart, type değerine bakar ve eşleşen case satırının altındaki satırları çalıştırır, yalnızca onları. Ardından kapanış süslü parantezinden sonraki kısımla devam eder.

columns bildirildiğinde henüz bir değeri yoktur. Bu sorun değildir, çünkü her case ona bir değer verir. Dart, enum değerlerinin her biri için bir case olup olmadığını denetler: birini atlarsan kod derlenmez ve eksik değeri belirten bir hata verir.

Görev

Kolay

Izgarada her zaman 2 sütun vardır. return öncesinde int columns; bildirimini yap ve type üzerinde bir switch kullanarak değerini ayarla: telefonda 2, tablette 4. Ardından ızgaranın crossAxisCount değeri olarak columns kullan.

Kendin dene

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