Ekspresi switch

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

switch yang hanya memilih nilai dapat ditulis lebih singkat sebagai ekspresi switch. Ekspresi ini mengembalikan nilai yang langsung kamu simpan:

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

Setiap baris berisi nilai enum, tanda panah =>, dan hasilnya, lalu diakhiri dengan koma. Tidak ada case dan tidak ada assignment, dan seluruh switch diakhiri dengan ; karena ini adalah satu pernyataan.

Ekspresi switch harus memiliki jawaban untuk setiap nilai. Tambahkan nilai ke enum, lalu setiap switch yang tidak memiliki baris untuk nilai tersebut akan gagal dikompilasi, dengan error yang menunjukkan case yang hilang. Dart menunjukkan setiap bagian yang perlu diperbarui.

Tantangan

Sedang

Tambahkan tata letak desktop ke galeri:

tambahkan desktop ke enum ScreenType
atur type menjadi ScreenType.desktop saat lebarnya 1000 atau lebih
ganti pernyataan switch dengan ekspresi switch yang menghasilkan 2, 4, dan 6 kolom

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