Le Widget Checkbox dans Flutter

Le Widget Checkbox dans Flutter

1. Objectif

• Apprendre à utiliser les cases à cocher dans Flutter.

2. Présentation

• Pour compléter les widgets offrant une liberté de choix à un utilisateur, il faut évoquer les Checkbox. Contrairement aux boutons radios, les cases à cocher permettent un choix multiple.
• Un widget Checkbox dans Flutter est utilisé pour permettre à l’utilisateur de sélectionner ou de désélectionner une option. Cela peut être utile lorsque vous devez collecter des informations de plusieurs choix, par exemple, dans une liste de tâches à faire.
• Vous pouvez utiliser le widget Checkbox pour créer un checkbox dans votre application Flutter. Il prend en charge les propriétés telles que value, qui définit si la case est cochée ou décochée, et onChanged, qui définit une fonction qui sera appelée lorsque l’état de la case à cocher change.
• Dans Flutter , nous pouvons avoir deux types de cases à cocher : une version compacte de la case à cocher nommée « checkbox » et la case à cocher « CheckboxListTile » , qui est livrée avec un en-tête et un sous-titre.





3. Le widget Checkbox

• Syntax
Checkbox(
value: false,
onChanged: () {},
),

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyAppgt;{
  bool _isChecked = false;

  void _handleCheckboxValueChanged(bool value) {
    setState(() {
      _isChecked = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          padding: EdgeInsets.all(16),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Checkbox(
                value: _isChecked,
                onChanged: _handleCheckboxValueChanged,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Dans cet exemple, nous avons défini la variable _isChecked pour suivre si la case à cocher est cochée ou non et la méthode _handleCheckboxValueChanged pour mettre à jour la valeur cochée ou non lorsqu’elle est sélectionnée. Nous avons également utilisé Checkbox pour créer une case à cocher.

4. CheckboxListTile

• CheckboxListTile est un widget dans Flutter qui combine un ‘Checkbox‘ et un ‘ListTile‘ . Il permet à l’utilisateur de sélectionner plusieurs options dans une liste d’éléments. Il permet à l’utilisateur de sélectionner plusieurs options dans une liste d’éléments. La case peut être cochée ou désactivée, indiquant l’état de sélection d’un élément.
• Vous pouvez utiliser ListTile et ‘value‘ pour spécifier l’état de sélection actuel de la case à cocher.
• La propriété onChanged est utilisée pour spécifier une fonction de rappel appelée chaque fois que l’état de sélection de la case à cocher change.
• Voici un exemple de la façon dont vous pouvez utiliser ‘CheckboxListTile

CheckboxListTile(
  value: _isChecked,
  onChanged: (value) {
    setState(() {
      _isChecked = value;
    });
  },
  title: Text('Checkbox List Tile'),
  subtitle: Text('Une case à cocher combinée avec ListTile'),
  controlAffinity: ListTileControlAffinity.leading,
),

5. Applications

• App01

• Créer une application Flutter qui contient une liste de sandwich, avec leurs prix, d’un restaurant , utiliser la classe CheckboxListTile pour créer des cases à cocher avec un titre (nom du sandwich) et un sous-titre (prix) pour chaque élément de menu.
• Lorsqu’un utilisateur clique sur une case à cocher, la méthode _handleCheckboxValueChanged est appelée et met à jour la variable _isSelected pour refléter la sélection de l’utilisateur.
• Ensuite, vous devez parcourir la liste _isSelected pour déterminer la somme des prix sélectionnés et la stocker dans la variable _total.
• Finalement, vous affichez la somme totale à l’écran avec un widget Text.
Solution

// ignore_for_file: unrelated_type_equality_checks

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  final List _menuItems = [
    'Tarte au citron meringuée',
    'Carpaccio d’oranges à la cannelle',
    'Tarte au citron meringuée',
    'Marquise au chocolat noir sauce café',
    'Fondant au chocolat glace vanille',
    'Sorbet Citron',
    'Coupe colonel',
    'Panna cotta aux fruits rouges'
  ];
  final List _prices = [
    19.000,
    21.500,
    18.450,
    16.890,
    17.980,
    13.280,
    26.000,
    23.000
  ];
  final List _isSelected = [
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false
  ];
  double _total = 0;

  void _handleCheckboxValueChanged(int index, bool value) {
    setState(() {
      _isSelected[index] = value;
      _total = 0;
      for (int i = 0; i < _isSelected.length; i++) {
        if (_isSelected[i]) {
          _total += _prices[i];
        }
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Menu du jour"),
        ),
        body: Container(
          padding: const EdgeInsets.all(26.0),
          child: Column(
            children: [
              Container(
                alignment: Alignment.topLeft,
                child: const Text('NOS DESSERTS MAISON'),
              ),
              Container(
                height: 1.0,
                width: double.infinity,
                color: Colors.grey[300],
                margin: const EdgeInsets.symmetric(vertical: 10.0),
              ),
              Expanded(
                child: ListView.builder(
                  scrollDirection: Axis.vertical,
                  itemCount: _menuItems.length,
                  itemBuilder: (context, index) {
                    return CheckboxListTile(
                      dense: true,
                      value: _isSelected[index],
                      onChanged: (value) {
                        _handleCheckboxValueChanged(index, value!);
                      },
                      title: Text(
                        _menuItems[index],
                        style: TextStyle(
                          color: _isSelected[index] ? Colors.red : Colors.black,
                        ),
                      ),
                      subtitle: Text(
                        '${_prices[index].toStringAsFixed(3)} DT',
                        style: TextStyle(
                          color: _isSelected[index] ? Colors.red : Colors.green,
                          fontFamily: "Roboto",
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      activeColor: Colors.red,
                    );
                  },
                ),
              ),
              Container(
                height: 1.0,
                width: double.infinity,
                color: Colors.grey[300],
                margin: const EdgeInsets.symmetric(vertical: 10.0),
              ),
              Container(
                padding: const EdgeInsets.fromLTRB(20, 2, 20, 2),
                alignment: Alignment.topRight,
                child: Text(
                  'Total: ${_total.toStringAsFixed(3)} DT',
                  style: const TextStyle(fontSize: 20),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}