bool và toán tử ? :

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 17 trên 34.

Một số giá trị chỉ có thể là có hoặc không: đèn có bật không, ô có được đánh dấu không. Trong Dart, kiểu dữ liệu dùng cho các giá trị này là bool, với hai giá trị là true và false:

bool _isOn = false;

Dấu ! đứng trước một giá trị bool sẽ đảo ngược giá trị đó, vì vậy _isOn = !_isOn; đổi true thành false và false thành true. Phương thức _flip của đèn đã làm việc đó.

Để hiển thị thứ này hoặc thứ khác tùy vào giá trị bool, hãy dùng biểu thức điều kiện ? :. Có thể đọc nó như một câu hỏi: đèn có bật không? nếu có thì dùng giá trị này, nếu không thì dùng giá trị kia.

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

Trước ? là một giá trị đúng hoặc sai. Sau dấu này là giá trị ứng với true, rồi đến : và giá trị ứng với false. Biểu thức này dùng được ở bất kỳ nơi nào cần một giá trị: văn bản, màu sắc hoặc kích thước.

Thử thách

Dễ

Nút Switch đổi trạng thái của _isOn, nhưng đèn luôn trông như đang tắt. Dùng ? : để khi _isOn là true, dòng chữ hiển thị The light is on và bóng đèn có màu Colors.amber; nếu không thì hiển thị The light is off và bóng đèn có màu Colors.grey.

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