bool e l'operatore ? :

Fa parte della sezione Rendere l’app interattiva del percorso Flutter di Coddy. Lezione 17 di 34.

Alcuni valori possono essere solo sì o no: la luce è accesa? La casella è spuntata? Il tipo che Dart usa per questi valori è bool, e i suoi due valori sono true e false:

bool _isOn = false;

Il ! davanti a un bool lo inverte, quindi _isOn = !_isOn; trasforma true in false e false in true. Il metodo _flip della lampada fa già questo.

Per mostrare una cosa oppure un'altra a seconda di un bool, usa il condizionale ? :. Si legge come una domanda: è acceso? allora questo, altrimenti quello.

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

Prima di ? va qualcosa di vero o falso. Dopo, il valore per true, poi : e il valore per false. Funziona ovunque vada un valore: un testo, un colore, una dimensione.

Sfida

Facile

Il pulsante Switch cambia il valore di _isOn, ma la lampada sembra sempre spenta. Usa ? : in modo che, quando _isOn è true, il testo dica The light is on e la lampadina sia Colors.amber; altrimenti, il testo dica The light is off e la lampadina sia Colors.grey.

Provalo tu

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