Utiliser switch avec une énumération

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

Une galerie doit afficher 2 photos par rangée sur un téléphone et 4 sur une tablette. Tu pourrais écrire if et else, mais lorsqu’il faut une réponse propre à chaque valeur d’une énumération, un switch est plus lisible :

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

Dart examine type et exécute les lignes sous le case correspondant, et uniquement celles-ci. Ensuite, l’exécution reprend après l’accolade fermante.

columns n’a pas de valeur au moment de sa déclaration. C’est autorisé, car chaque cas lui en attribue une. Dart vérifie que chaque valeur de l’énumération a un cas : s’il en manque un, le code ne compile pas et une erreur indique la valeur manquante.

Défi

Facile

La grille comporte toujours 2 colonnes. Avant le return, déclare int columns; et définis sa valeur avec un switch sur type : 2 sur un téléphone, 4 sur une tablette. Utilise ensuite columns comme valeur de crossAxisCount de la grille.

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