Afficher et masquer un widget

Fait partie de la section Rendre l’application interactive du Journey Flutter de Coddy. Leçon 20 sur 34.

Pour n’afficher un widget que parfois, place un if devant lui, directement dans la liste de children :

Column(
  children: [
    const Text('Question'),
    if (_showHint) const Text('A hint'),
  ],
)

Lorsque _showHint vaut false, l’indice n’est pas masqué : il ne figure pas du tout dans la liste, et les widgets qui le suivent remontent pour occuper l’espace. Lorsqu’il vaut true, l’indice est présent. Ce if n’a ni accolades ni else : c’est la version de if pour les listes, comme le for que tu as utilisé pour créer une liste de widgets.

Un bouton qui affiche et masque quelque chose inverse généralement un booléen avec ! et modifie son propre libellé avec ? :.

Défi

Facile

La réponse Paris est toujours affichée à l’écran. Affiche-la uniquement lorsque _showAnswer est vrai. Le bouton inverse déjà la valeur de _showAnswer ; fais en sorte que son libellé soit Show answer lorsque la réponse est masquée et Hide answer lorsqu’elle est affichée.

Essayez vous-même

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _showAnswer = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Quiz')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text('What is the capital of France?', style: TextStyle(fontSize: 20)),
            const Text('Paris', style: TextStyle(fontSize: 32)),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _showAnswer = !_showAnswer;
                });
              },
              child: const Text('Show answer'),
            ),
          ],
        ),
      ),
    );
  }
}