Ein Widget ein- und ausblenden

Teil des Abschnitts Apps interaktiv gestalten der Flutter-Journey von Coddy. Lektion 20 von 34.

Um ein Widget nur manchmal anzuzeigen, setze ein if davor, direkt in die Liste der children:

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

Wenn _showHint false ist, wird der Hinweis nicht ausgeblendet: Er ist überhaupt nicht in der Liste, und die Widgets danach rücken nach oben, um den Platz zu füllen. Wenn es true ist, ist der Hinweis vorhanden. Dieses if hat keine geschweiften Klammern und kein else: Es ist die Listenvariante von if, wie das for, das du verwendet hast, um eine Liste von Widgets zu erstellen.

Eine Schaltfläche, die etwas ein- und ausblendet, schaltet normalerweise einen bool-Wert mit ! um und ändert ihre eigene Beschriftung mit ? :.

Aufgabe

Einfach

Die Antwort Paris ist immer auf dem Bildschirm zu sehen. Zeige sie nur an, wenn _showAnswer true ist. Die Schaltfläche schaltet _showAnswer bereits um; lass ihre Beschriftung Show answer lauten, wenn die Antwort ausgeblendet ist, und Hide answer, wenn sie angezeigt wird.

Probier es selbst

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