Flutter : Comment créer un bouton switch à la manière d’iOS

Dans cet article, je vous montre comment utiliser en programmation Dart et Flutter le widget CupertinoSwitch pour créer un composant interactif qui permet aux utilisateurs de choisir entre deux valeurs.

Un interrupteur (également connu sous le nom de toggle) est un composant interactif qui permet aux utilisateurs de choisir entre une paire de valeurs opposées (par exemple, on/off, vrai/faux, clair/foncé) et présente différentes apparences pour distinguer le choix. Cet article vous montre comment créer un interrupteur de style iOS dans Flutter en utilisant le widget CupertinoSwitch.

Principe

Pour utiliser le widget CupertinoSwitch, vous devez importer la bibliothèque Cupertino :

import 'package:flutter/cupertino.dart';

Le widget CupertinoSwitch requiert 2 paramètres :

• valeur (bool) : L’état du widget
• onChanged : Cette fonction de rappel est déclenchée lorsque l’utilisateur modifie l’interrupteur.

Les autres paramètres sont facultatifs.

Constructeur :

CupertinoSwitch(
   activeColor: CupertinoColors.activeBlue,
   trackColor: CupertinoColors.inactiveGray,
   thumbColor: CupertinoColors.white,
   value: _showBlueBox,
   onChanged: (value) {
      setState(() {
         _showBlueBox = value;
      });
   },
),

Exemple

Aperçu de l’application

La petite application que nous allons réaliser contient 2 interrupteurs. Le premier, dont la couleur active est le vert (c’est la couleur par défaut), contrôle l’existence de la boîte verte. Le deuxième interrupteur, dont la couleur active est le bleu, contrôle l’existence de la boîte bleue.

Voici comment cela fonctionne :

Le code

Le code source complet dans main.dart avec des explications dans les commentaires :

import 'package:flutter/cupertino.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      title: "Bouton Switch iOS",
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _showGreenBox = false;
  bool _showBlueBox = false;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text("Bouton Switch iOS"),
      ),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          const SizedBox(
            height: 100,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text('Afficher la boite verte'),
              CupertinoSwitch(
                value: _showGreenBox,
                onChanged: (value) {
                  setState(() {
                    _showGreenBox = value;
                  });
                },
              ),
            ],
          ),
          const SizedBox(
            height: 20,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text('Afficher la boite bleue'),
              CupertinoSwitch(
                activeColor: CupertinoColors.activeBlue,
                trackColor: CupertinoColors.inactiveGray,
                thumbColor: CupertinoColors.white,
                value: _showBlueBox,
                onChanged: (value) {
                  setState(() {
                    _showBlueBox = value;
                  });
                },
              ),
            ],
          ),
          const SizedBox(
            height: 30,
          ),
          if (_showGreenBox)
            Container(
              width: double.infinity,
              height: 200,
              color: CupertinoColors.activeGreen,
            ),
          if (_showBlueBox)
            Container(
              margin: const EdgeInsets.only(top: 30),
              width: double.infinity,
              height: 200,
              color: CupertinoColors.activeBlue,
            ),
        ]),
      ),
    );
  }
}

Vous avez appris les principes de base du widget CupertinoSwitch. Vous aurez peut-être besoin de l’utiliser souvent si vous avez l’intention de développer une application qui se concentre sur les utilisateurs d’iOS.

Partagez en commentaire vos expériences et si ce mini tuto vous a aidé dans vos projets. J’ai hâte de vous lire 😉