Tampilkan dan Sembunyikan Widget

Termasuk bagian Membuat Aplikasi Interaktif dalam perjalanan Flutter di Coddy. Pelajaran 20 dari 34.

Untuk menampilkan widget hanya sesekali, letakkan if di depannya, tepat di dalam daftar children:

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

Saat _showHint bernilai false, petunjuk itu bukan disembunyikan: petunjuk itu sama sekali tidak ada dalam daftar, dan widget setelahnya bergeser ke atas untuk mengisi ruang. Saat nilainya true, petunjuk itu ada. if ini tidak memiliki kurung kurawal dan tidak memiliki else: ini adalah versi if untuk daftar, seperti for yang kamu gunakan untuk membuat daftar widget.

Tombol yang menampilkan dan menyembunyikan sesuatu biasanya membalik nilai bool dengan ! dan mengubah labelnya sendiri dengan ? :.

Tantangan

Mudah

Jawaban Paris selalu tampil di layar. Tampilkan hanya saat _showAnswer bernilai true. Tombol sudah membalik nilai _showAnswer; buat labelnya bertuliskan Show answer saat jawaban tersembunyi dan Hide answer saat jawaban ditampilkan.

Coba sendiri

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