ביטויי switch

חלק מהיחידה פריסות שמתאימות למסך במסלול ה-Flutter של Coddy. שיעור 20 מתוך 30.

אפשר לכתוב switch שבוחר רק ערך בצורה קצרה יותר, כביטוי switch. הוא מחזיר ערך ששומרים ישירות:

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

כל שורה כוללת ערך של ה-enum, חץ => ואת התוצאה המתאימה לו, ומסתיימת בפסיק. אין case ואין השמה, וכל הביטוי מסתיים ב-; כי הוא פקודה אחת.

לביטוי switch חייבת להיות תשובה לכל ערך. הוסיפו ערך ל-enum, וכל switch עליו שאין בו שורה עבורו יפסיק להתקמפל, עם שגיאה שמצביעה על ה-case החסר. Dart מציג לכם כל מקום שצריך לעדכן.

אתגר

בינוני

הוסיפו פריסת מחשב שולחני לגלריה:

הוסיפו את desktop אל enum ScreenType
הגדירו את type ל-ScreenType.desktop כאשר הרוחב הוא 1000 או יותר
החליפו את משפט ה-switch בביטוי switch שמציג 2, 4 ו-6 עמודות

נסו בעצמכם

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