bool型と ?: 演算子

CoddyのFlutterジャーニー「アプリをインタラクティブにする」セクションの一部。レッスン 17/34。

値には、はいかいいえのどちらかしかないものがあります。電気がついているか、チェックボックスにチェックが入っているか、などです。Dartではこれらの型をboolといい、値はtrueとfalseの2つです。

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)

?の前には、trueかfalseになる値を置きます。その後にtrueの場合の値、次に:、そしてfalseの場合の値を置きます。値を置ける場所ならどこでも使えます。テキスト、色、サイズなどです。

チャレンジ

簡単

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