Hiển thị và ẩn widget

Thuộc phần Tạo tính tương tác trong hành trình Flutter của Coddy. Bài học 20 trên 34.

Để chỉ thỉnh thoảng hiển thị một widget, hãy đặt if phía trước widget đó, ngay bên trong danh sách children:

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

Khi _showHint là false, gợi ý không bị ẩn: nó hoàn toàn không có trong danh sách, còn các widget phía sau sẽ dịch lên để lấp chỗ trống. Khi giá trị này là true, gợi ý sẽ xuất hiện. if này không có dấu ngoặc nhọn và không có else: đây là phiên bản if dùng trong danh sách, giống như for bạn đã dùng để tạo danh sách widget.

Nút dùng để hiện và ẩn nội dung thường đảo giá trị bool bằng ! và đổi nhãn của chính nó bằng ? :.

Thử thách

Dễ

Đáp án Paris luôn hiển thị trên màn hình. Chỉ hiển thị đáp án khi _showAnswer là true. Nút đã chuyển đổi giá trị của _showAnswer; hãy để nhãn nút hiển thị Show answer khi đáp án đang ẩn và Hide answer khi đáp án đang hiển thị.

Tự làm thử

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