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

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({
  Key? key, 
  required bool value, 
  required ValueChanged<bool>? onChanged, 
  Color? activeColor, 
  Color? trackColor, 
  Color? thumbColor, 
  DragStartBehavior dragStartBehavior = DragStartBehavior.start
})

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(
      // hide the debug banner
      debugShowCheckedModeBanner: false,
      title: "Cupertino Switch",
      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("Cupertino Switch"),
      ),
      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 verte'),
                // this switch controls the existence of the blue box
                CupertinoSwitch(
                  activeColor: CupertinoColors.activeBlue,
                  trackColor: CupertinoColors.inactiveGray,
                  thumbColor: CupertinoColors.white,
                  value: _showBlueBox,
                  onChanged: (value) {
                    setState(() {
                      _showBlueBox = value;
                    });
                  },
                ),
              ],
            ),
            const SizedBox(
              height: 30,
            ),

            // The Green Box
            if (_showGreenBox)
              Container(
                width: double.infinity,
                height: 200,
                color: CupertinoColors.activeGreen,
              ),

            // The Blue Box
            if (_showBlueBox)
              Container(
                margin: const EdgeInsets.only(top: 30),
                width: double.infinity,
                height: 200,
                color: CupertinoColors.activeBlue,
              ),
          ],
        ),
      ),
    );
  }
}

Next step

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 😉