위젯 표시 및 숨기기

Coddy Flutter 여정의 앱에 상호작용 추가하기 섹션에 포함된 레슨. 34개 중 20번째.

위젯을 특정한 경우에만 표시하려면 children 목록 안에서 해당 위젯 바로 앞에 if를 넣으세요:

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

_showHint가 false이면 힌트가 숨겨지는 것이 아닙니다. 힌트는 목록에 아예 없으며, 뒤에 오는 위젯들이 빈 공간을 채우도록 위로 이동합니다. true이면 힌트가 표시됩니다. 이 if에는 중괄호도 else도 없습니다. 위젯 목록을 만들 때 사용한 for처럼 목록에서 사용하는 if입니다.

무언가를 표시하거나 숨기는 버튼은 보통 !로 bool 값을 뒤집고 ? :로 버튼 자체의 레이블을 바꿉니다.

챌린지

쉬움

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