bool과 ?: 연산자

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

일부 값은 항상 참 또는 거짓입니다. 전등이 켜져 있는지, 상자에 체크 표시가 되어 있는지 같은 경우입니다. 이런 값을 나타내는 Dart의 자료형은 bool이며, 값은 true와 false 두 가지입니다.

bool _isOn = false;

bool 앞에 !를 붙이면 값이 뒤집히므로, _isOn = !_isOn;은 true를 false로, false를 true로 바꿉니다. 전등의 _flip 메서드는 이미 이렇게 동작합니다.

bool에 따라 둘 중 하나를 표시하려면 조건 연산자 ? :를 사용하세요. 질문처럼 읽으면 됩니다. 켜져 있나요? 그러면 이것, 아니면 저것.

Text(_isOn ? 'On' : 'Off')
Icon(Icons.star, color: _isOn ? Colors.red : Colors.black)

? 앞에는 참 또는 거짓이 오는 값이 있습니다. 그 뒤에는 참일 때의 값, 이어서 :와 거짓일 때의 값이 옵니다. 텍스트, 색상, 크기처럼 값이 들어가는 곳이라면 어디서든 사용할 수 있습니다.

챌린지

쉬움

Switch 버튼은 _isOn을 전환하지만, 램프는 항상 꺼진 것처럼 보입니다. ? :를 사용하여 _isOn이 true일 때 텍스트가 The light is on이라고 표시되고 전구가 Colors.amber가 되게 하며, 그렇지 않을 때는 The light is off라고 표시되고 전구가 Colors.grey가 되게 하세요.

직접 해보기

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 _isOn = false;

  void _flip() {
    setState(() {
      _isOn = !_isOn;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Lamp')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.lightbulb, size: 96, color: Colors.grey),
            const Text('The light is off'),
            const SizedBox(height: 16),
            ElevatedButton(onPressed: _flip, child: const Text('Switch')),
          ],
        ),
      ),
    );
  }
}