switch İfadeleri

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

Yalnızca bir değer seçen bir switch, switch ifadesi olarak daha kısa yazılabilir. Bir değer döndürür ve bunu doğrudan saklayabilirsiniz:

final columns = switch (type) {
  ScreenType.phone => 2,
  ScreenType.tablet => 4,
};

Her satırda enum’un bir değeri, bir ok => ve bu değer için sonuç bulunur; satır virgülle biter. case ve atama yoktur; bu tek bir ifade olduğundan switch’in tamamı ; ile biter.

Bir switch ifadesi, her değer için bir yanıt içermelidir. Enum’a bir değer eklediğinizde, o değer için satır içermeyen her switch derlenmeyi durdurur ve eksik case’i gösteren bir hata verir. Dart, güncellemeniz gereken her yeri gösterir.

Görev

Orta

Galeriye bir masaüstü düzeni ekleyin:

enum ScreenType içine desktop ekleyin
genişlik 1000 veya daha fazla olduğunda type değerini ScreenType.desktop olarak ayarlayın
switch deyimini 2, 4 ve 6 sütun veren bir switch ifadesiyle değiştirin

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;
    }
    int columns;
    switch (type) {
      case ScreenType.phone:
        columns = 2;
      case ScreenType.tablet:
        columns = 4;
    }
    final photos = ['Beach', 'Forest', 'City', 'Desert', 'Lake', 'Snow', 'Island', 'Canyon'];
    return Scaffold(
      appBar: AppBar(title: Text('Gallery: ${type.name}')),
      body: GridView.count(
        crossAxisCount: columns,
        children: [
          for (final photo in photos)
            Container(
              margin: const EdgeInsets.all(4),
              color: Colors.cyan.shade100,
              child: Center(child: Text(photo)),
            ),
        ],
      ),
    );
  }
}