Faire des curseurs dans Flutter avec le widget Slider

Pourquoi utiliser le widget Slider ?

Le widget Slider est utile dans plusieurs cas d’utilisation de votre application Flutter. Par exemple :

Sélection de valeurs numériques, pour permettre à un utilisateur de choisir son âge, la température souhaitée, ou un niveau sonore.
Ajustement d’un paramètre, comme régler la luminosité, le volume, ou l’intensité d’un effet.
Contrôle d’une plage de valeurs, lorsque l’utilisateur doit ajuster une valeur entre un minimum et un maximum sans entrer de texte manuellement.

Comment utiliser le widget Slider ?

Voici un exemple de base d’utilisation du Slider (ici pour sélectionner un âge) :

import 'package:flutter/material.dart';

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

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

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

class AgeSelector extends StatefulWidget {
  @override
  _AgeSelectorState createState() => _AgeSelectorState();
}

class _AgeSelectorState extends State<AgeSelector> {
  double _age = 18;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Sélectionnez votre âge")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text("Âge sélectionné: ${_age.toInt()} ans", style: const TextStyle(fontSize: 20)),
          Slider(
            value: _age,
            min: 10,
            max: 100,
            divisions: 90,
            label: _age.toInt().toString(),
            onChanged: (double newValue) {
              setState(() {
                _age = newValue;
              });
            },
          ),
        ],
      ),
    );
  }
}

Explication des propriétés principales :

value : La valeur actuelle du Slider.
min et max : Définissent la plage de valeurs possibles.
divisions : Nombre de divisions (ici 90, permettant un pas de 1 entre 10 et 100).
label : Affiche la valeur actuelle au-dessus du curseur.
onChanged : Fonction appelée lorsqu’on déplace le curseur, permettant la mise à jour de l’état.

Comment personnaliser le Slider ?

Il est possible de personnaliser votre curseur de diverses manières. En voici quelques-unes.

Changer la couleur du curseur et de la barre

Flutter permet de personnaliser l’apparence du Slider lorsque vous l’utilisez, grâce à la propriété activeColor (barre active) et inactiveColor (barre inactive) :

Slider(
  value: _age,
  min: 10,
  max: 100,
  activeColor: Colors.blue,
  inactiveColor: Colors.grey,
  onChanged: (double newValue) {
    setState(() {
      _age = newValue;
    });
  },
)

Modifier la couleur en fonction de la valeur sélectionnée

Il est aussi possible de modifier la couleur de la barre selon la valeur sélectionnée, grâce à une petite astuce :

Slider(
  value: _age,
  min: 10,
  max: 100,
  activeColor: _age < 30 ? Colors.green : (_age < 60 ? Colors.orange : Colors.red),
  onChanged: (double newValue) {
    setState(() {
      _age = newValue;
    });
  },
)

Personnaliser la forme du curseur

La forme du curseur peut être modifié en plaçant votre Slider dans un SliderTheme et en utilisant la propriété thumbShape :

SliderTheme(
  data: SliderTheme.of(context).copyWith(
    thumbShape: RoundSliderThumbShape(enabledThumbRadius: 12.0),
  ),
  child: Slider(
    value: _age,
    min: 10,
    max: 100,
    onChanged: (double newValue) {
      setState(() {
        _age = newValue;
      });
    },
  ),
)

Modifier l’apparence de la barre

Il est aussi possible de changer l’épaisseur et le style de la barre avec trackHeight et trackShape :

SliderTheme(
  data: SliderTheme.of(context).copyWith(
    trackHeight: 8.0,
  ),
  child: Slider(
    value: _age,
    min: 10,
    max: 100,
    onChanged: (double newValue) {
      setState(() {
        _age = newValue;
      });
    },
  ),
)

Ajouter un tooltip au-dessus du curseur

Enfin, vous pouvez utiliser showValueIndicator pour afficher un tooltip contenant la valeur sélectionnée :

SliderTheme(
  data: SliderTheme.of(context).copyWith(
    showValueIndicator: ShowValueIndicator.always,
  ),
  child: Slider(
    value: _age,
    min: 10,
    max: 100,
    label: _age.toString(),
    onChanged: (double newValue) {
      setState(() {
        _age = newValue;
      });
    },
  ),
)