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 😉
