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

Avec Flutter créez un bouton switch en utilisant le widget CupertinoSwitch pour donner un style iOS à votre application mobile.

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 :

Les boutons switch en mode OFF
Les boutons switch en mode OFF

 

Les boutons switch en mode ON
Les boutons switch en mode ON

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 😉

 

Sur le même thème
Claude BUENO
Claude BUENO

Passionné par la Transformation numérique et le Pilotage de projets informatiques. Intérêt pour le Management, le Marketing et le Développement d'applications mobiles.
Je blogue depuis 2008 sur les sujets numériques.
Je suis fan de Star Wars, Vikings et Game of Thrones. J'habite sur Tours (Centre-Val de Loire)

Publications: 112

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *