bool et l’opérateur ?:

Fait partie de la section Rendre l’application interactive du Journey Flutter de Coddy. Leçon 17 sur 34.

Certaines valeurs ne peuvent être que oui ou non : la lumière est-elle allumée, la case est-elle cochée ? En Dart, leur type est bool, et leurs deux valeurs sont true et false :

bool _isOn = false;

Le ! placé devant un booléen l’inverse : ainsi, _isOn = !_isOn; transforme true en false et false en true. La méthode _flip de la lampe fait déjà cela.

Pour afficher une chose ou une autre selon un booléen, utilisez l’expression conditionnelle ? :. Elle se lit comme une question : est-ce allumé ? alors ceci, sinon cela.

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

Avant le ?, il y a une valeur vraie ou fausse. Après, la valeur correspondant à true, puis : et la valeur correspondant à false. Cela fonctionne partout où une valeur est attendue : un texte, une couleur, une taille.

Défi

Facile

Le bouton Switch inverse _isOn, mais la lampe semble toujours éteinte. Utilise ? : pour que, lorsque _isOn est vrai, le texte indique The light is on et que l’ampoule soit de couleur Colors.amber, et que, sinon, le texte indique The light is off et que l’ampoule soit de couleur Colors.grey.

Essayez vous-même

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