Expressions switch

Fait partie de la section Des mises en page adaptées du Journey Flutter de Coddy. Leçon 20 sur 30.

Un switch qui ne fait que choisir une valeur peut s’écrire plus brièvement sous la forme d’une expression switch. Elle renvoie une valeur que tu stockes directement :

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

Chaque ligne contient une valeur de l’énumération, une flèche => et le résultat correspondant, et se termine par une virgule. Il n’y a ni case ni affectation, et l’ensemble du switch se termine par ;, car il s’agit d’une seule instruction.

Une expression switch doit fournir une réponse pour chaque valeur. Ajoute une valeur à l’énumération, et toute instruction switch qui ne comporte pas de ligne pour cette valeur cesse de compiler, avec une erreur indiquant le cas manquant. Dart t’indique chaque endroit à mettre à jour.

Défi

Moyen

Ajoute une disposition pour ordinateur de bureau à la galerie :

ajoute desktop à enum ScreenType
définis type sur ScreenType.desktop lorsque la largeur est supérieure ou égale à 1000
remplace l’instruction switch par une expression switch qui donne 2, 4 et 6 colonnes

Essayez vous-même

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