Choisir une valeur avec un curseur

Fait partie de la section Rendre l’application interactive du Journey Flutter de Coddy. Leçon 29 sur 34.

Un Slider permet de choisir un nombre dans une plage en le faisant glisser. Comme un interrupteur, il affiche sa value: et appelle onChanged avec la nouvelle valeur :

Slider(
  value: _size,
  min: 0,
  max: 50,
  divisions: 5,
  onChanged: (double value) {
    setState(() {
      _size = value;
    });
  },
)

min: et max: sont les deux extrémités. divisions: le fait avancer par paliers : 5 divisions de 0 à 50 donnent 0, 10, 20, 30, 40 et 50. Sans cela, toutes les valeurs intermédiaires sont possibles. Tu peux aussi toucher la piste, et le curseur s’y déplace.

La valeur est toujours un double, elle s’affiche donc sous la forme 20.0. _size.round() l’arrondit au nombre entier le plus proche, un int, qui s’affiche sous la forme 20.

Défi

Facile

Fais bouger le curseur : stocke sa valeur dans _volume avec setState.
Affiche le volume sous forme de nombre entier en dessous : Volume: 20, et non Volume: 20.0.

Essayez vous-même

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: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

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

class _HomePageState extends State<HomePage> {
  double _volume = 20;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sound')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(Icons.volume_up, size: 64),
            Slider(
              value: _volume,
              min: 0,
              max: 100,
              divisions: 10,
              onChanged: (double value) {},
            ),
            Text('Volume: ?', style: const TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}