הצגה והסתרה של וידג'ט

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

כדי להציג רכיב חזותי רק לפעמים, הוסיפו לפניו if, ממש בתוך הרשימה של children:

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

כאשר _showHint הוא false, הרמז אינו מוסתר: הוא כלל לא נמצא ברשימה, והרכיבים החזותיים שאחריו עולים כדי למלא את המקום. כאשר הוא true, הרמז מופיע. ל-if הזה אין סוגריים מסולסלים ואין else: זו גרסת הרשימה של if, כמו for שהשתמשתם בו כדי ליצור רשימה של רכיבים חזותיים.

כפתור שמציג ומסתיר משהו בדרך כלל הופך את ערך הבוליאני באמצעות ! ומשנה את התווית שלו באמצעות ? :.

אתגר

קל

התשובה Paris מופיעה תמיד על המסך. הצג אותה רק כאשר _showAnswer הוא true. הכפתור כבר מחליף את הערך של _showAnswer; הצג עליו את התווית Show answer כשהתשובה מוסתרת ואת התווית Hide answer כשהיא מוצגת.

נסו בעצמכם

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