Utiliser RadioButtons et RadioListTile dans Flutter

Nous pouvons placer le bouton radio dans un groupe de deux ou plus et l’afficher à l’écran sous forme de trous circulaires avec un espace blanc (pour non sélectionné) ou un point (pour sélectionné).

Nous pouvons fournir une étiquette pour chaque bouton radio correspondant représentant le choix du bouton radio.

Nous pouvons choisir un bouton radio en cliquant avec la souris sur le trou circulaire ou en utilisant un raccourci clavier.

• Avant de pouvoir utiliser les boutons radio, vous devez importer le package Material Components pour Flutter :
• package:flutter/material.dart.

• Un bouton radio doit avoir une valeur passée en argument value.
• Pour spécifier quelle valeur est actuellement sélectionnée dans un groupe, vous devez passer l’argument groupValue.
• Un bouton radio est dans l’état sélectionné si son value correspond au groupValue.
• Puisqu’un groupe ne peut avoir qu’une seule valeur sélectionnée, la valeur de groupe sélectionnée doit être la même pour tous les boutons radio d’un groupe. Par conséquent, il est recommandé de passer la même variable (par exemple en utilisant une variable d’état) comme groupValueargument, de sorte que vous n’ayez qu’à mettre à jour une variable pour changer la valeur actuellement sélectionnée.
• Si vous souhaitez définir l’un des boutons comme étant initialement sélectionné, définissez simplement le bouton value comme valeur initiale de la variable transmise en tant que groupValue.
• Dans presque tous les cas, le value doit être unique parmi les boutons d’un même groupe, à moins que vous n’autorisiez la sélection de plusieurs boutons radio en même temps, ce qui est inhabituel.
• La valeur actuellement sélectionnée peut être modifiée lorsque l’utilisateur clique sur un bouton radio. Vous devez gérer cet événement dans une fonction de rappel passée en argument onChanged.
• Si vous utilisez une variable d’état pour stocker la valeur sélectionnée, vous devez la mettre à jour.

• Flutter vous permet de changer la couleur du bouton radio.
• Lorsque le bouton radio est sélectionné, vous pouvez définir la couleur en passant l’argument activeColor.
• Lorsque le bouton reçoit focus, vous pouvez définir une couleur différente en passant l’argument focusColor.
• Vous pouvez également définir la couleur lorsqu’un pointeur survole le bouton à l’aide de l’argument hoverColor.
• La couleur définie comme activeColor affecte à la fois les cercles vides (extérieurs) et pleins (intérieurs).
• Pendant ce temps, les couleurs définies comme focusColor et hoverColor affectent l’ensemble du bouton autre que les cercles vides et pleins. En d’autres termes, cela affecte la couleur d’arrière-plan du bouton, généralement appelée Materialéclaboussure d’encre.
• Le splash n’est affiché que dans certains états tels que focused et hovered.

• Les boutons radio peuvent être sélectionnés ou désélectionnés. Les boutons radio ont des états activés, désactivés, survolés, focalisés et enfoncés.

• Pour changer la couleur du bouton radio dans Flutter, ajouter la propriété fillColor au widget Radio. À l’intérieur du fillColor, utilisez le MaterialStateColor pour ajouter la couleur de votre choix.
Code de l’exemple

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  static const String _title = 'Utilisation du widget RadioButton';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: _title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(_title),
        ),
        body: const Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

enum Travel { car, train, avion, taxi }

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State {
  Travel? _travel = Travel.car;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ListTile(
          title: const Text('Car'),
          leading: Radio(
            value: Travel.car,
            groupValue: _travel,
            fillColor: MaterialStateColor.resolveWith(
                (states) => Colors.blueAccent), //<-- SEE HERE
            onChanged: (Travel? value) {
              setState(() {
                _travel = value;
              });
            },
          ),
        ),
        ListTile(
          title: const Text('Train'),
          leading: Radio(
            value: Travel.train,
            groupValue: _travel,
            fillColor: MaterialStateColor.resolveWith((states) => Colors.green),
            onChanged: (Travel? value) {
              setState(() {
                _travel = value;
              });
            },
          ),
        ),
        ListTile(
          title: const Text('Avion'),
          leading: Radio(
            value: Travel.avion,
            groupValue: _travel,
            fillColor:
                MaterialStateColor.resolveWith((states) => Colors.orangeAccent),
            onChanged: (Travel? value) {
              setState(() {
                _travel = value;
              });
            },
          ),
        ),
        ListTile(
          title: const Text('Taxi'),
          leading: Radio(
            value: Travel.taxi,
            groupValue: _travel,
            fillColor:
                MaterialStateColor.resolveWith((states) => Colors.yellowAccent),
            onChanged: (Travel? value) {
              setState(() {
                _travel = value;
              });
            },
          ),
        ),
      ],
    );
  }
}

Résultat de l’exécution

Flutter RadioBoxListTile est une liste d’éléments dans laquelle l’utilisateur peut cocher ou décocher un seul élément de la liste.

Il permet aux utilisateurs de sélectionner une seule option dans la liste.

RadioBoxListTile peut également être positionné à droite ou à gauche de l’écran selon le besoin.

Code de l’exemple

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Home(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State createState() => _HomeState();
}
class _HomeState extends State {
  String? civilite; //aucun bouton radio ne sera sélectionné
  //String civilite = "Madame"; //si vous souhaitez définir la valeur par défaut
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Radio Button in Flutter"),
      ),
      body: Container(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            const Text(
              "Quel est votre civilité ?",
              style: TextStyle(fontSize: 18),
            ),
            const Divider(),
            RadioListTile(
              title: const Text("Monsieur"),
              value: "monsieur",
              groupValue: civilite,
              onChanged: (value) {
                setState(() {
                  civilite = value.toString();
                });
              },
            ),
            RadioListTile(
              title: const Text("Madame"),
              value: "madame",
              groupValue: civilite,
              onChanged: (value) {
                setState(() {
                  civilite = value.toString();
                });
              },
            ),
            RadioListTile(
              title: const Text("Mademoiselle"),
              value: "mademoiselle",
              groupValue: civilite,
              onChanged: (value) {
                setState(() {
                  civilite = value.toString();
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

Résultat de l’exécution

• Créer une application Flutter qui affiche une liste de 5 options (animaux) de couleurs différent que l’utilisateur peut sélectionner à l’aide de RadioListTile. La valeur sélectionnée est stockée dans une variable _selectedRadioTile et est affichée à l’écran.
Solution

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: RadioListTileExample(),
      ),
    );
  }
}

class RadioListTileExample extends StatefulWidget {
  @override
  _RadioListTileExampleState createState() => _RadioListTileExampleState();
}

class _RadioListTileExampleState extends State<RadioListTileExample> {
  late String _selectedRadioTile;

  @override
  void initState() {
    super.initState();
    _selectedRadioTile = 'Lion';
  }

  setSelectedRadioTile(String value) {
    setState(() {
      _selectedRadioTile = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        RadioListTile(
          value: 'Lion',
          title: const Text('Lion'),
          groupValue: _selectedRadioTile,
          onChanged: (value) {
            setSelectedRadioTile(value!);
          },
          activeColor: const Color.fromARGB(255, 77, 12, 230),
        ),
        RadioListTile(
          value: 'Tigre',
          title: const Text('Tigre'),
          groupValue: _selectedRadioTile,
          onChanged: (value) {
            setSelectedRadioTile(value!);
          },
          activeColor: const Color.fromARGB(255, 240, 147, 8),
        ),
        RadioListTile(
          value: 'Elephant',
          title: const Text('Elephant'),
          groupValue: _selectedRadioTile,
          onChanged: (value) {
            setSelectedRadioTile(value!);
          },
          activeColor: const Color.fromARGB(255, 155, 6, 6),
        ),
        RadioListTile(
          value: 'Girafe',
          title: const Text('Girafe'),
          groupValue: _selectedRadioTile,
          onChanged: (value) {
            setSelectedRadioTile(value!);
          },
          activeColor: const Color.fromARGB(255, 159, 157, 255),
        ),
        RadioListTile(
          value: 'Zèbre',
          title: const Text('Zèbre'),
          groupValue: _selectedRadioTile,
          onChanged: (value) {
            setSelectedRadioTile(value!);
          },
          activeColor: const Color.fromARGB(255, 247, 7, 215),
        ),
        const Text("Selection:"),
        Text(
          _selectedRadioTile,
          style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 32),
        ),
      ],
    );
  }
}

• Créer une application Flutter qui affiche une liste de 5 options de couleurs différentes que l’utilisateur peut sélectionner à l’aide de RadioListTile .
• L’utilisateur peut sélectionner une seule couleur à la fois. La valeur sélectionnée est stockée dans la variable _selectedRadioTile et est utilisée pour définir la couleur de fond d’un widget container
Solution

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: RadioListTileColorExample(),
      ),
    );
  }
}

class RadioListTileColorExample extends StatefulWidget {
  @override
  _RadioListTileColorExampleState createState() =>
      _RadioListTileColorExampleState();
}

class _RadioListTileColorExampleState extends State<RadioListTileColorExample> {
  late int _selectedRadioTile;

  @override
  void initState() {
    super.initState();
    _selectedRadioTile = 0;
  }

  setSelectedRadioTile(int value) {
    setState(() {
      _selectedRadioTile = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        RadioListTile(
          value: 0,
          title: Text('Red'),
          groupValue: _selectedRadioTile,
          onChanged: (value) {
            setSelectedRadioTile(value!);
          },
        ),
        RadioListTile(
          value: 1,
          title: Text('Green'),
          groupValue: _selectedRadioTile,
          onChanged: (value) {
            setSelectedRadioTile(value!);
          },
        ),
        RadioListTile(
          value: 2,
          title: Text('Blue'),
          groupValue: _selectedRadioTile,
          onChanged: (value) {
            setSelectedRadioTile(value!);
          },
        ),
        RadioListTile(
          value: 3,
          title: Text('Yellow'),
          groupValue: _selectedRadioTile,
          onChanged: (value) {
            setSelectedRadioTile(value!);
          },
        ),
        RadioListTile(
          value: 4,
          title: Text('Purple'),
          groupValue: _selectedRadioTile,
          onChanged: (value) {
            setSelectedRadioTile(value!);
          },
        ),
        Container(
          color: _selectedRadioTile == 0
              ? Colors.red
              : _selectedRadioTile == 1
                  ? Colors.green
                  : _selectedRadioTile == 2
                      ? Colors.blue
                      : _selectedRadioTile == 3
                          ? Colors.yellow
                          : Colors.purple,
          height: 200,
        ),
      ],
    );
  }
}