Elegir un valor con un deslizador

Parte de la sección Cómo hacerla interactiva del Journey de Flutter de Coddy. Lección 29 de 34.

Un Slider selecciona un número de un intervalo al arrastrarlo. Como un interruptor, muestra su value: y llama a onChanged con el nuevo valor:

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

min: y max: son los dos extremos. divisions: hace que avance en pasos: 5 divisiones de 0 a 50 significa 0, 10, 20, 30, 40 y 50. Sin él, es posible cualquier valor intermedio. También puedes tocar la pista y el control deslizante salta hasta allí.

El valor siempre es un double, así que se muestra como 20.0. _size.round() lo redondea al número entero más cercano, un int, que se muestra como 20.

Desafío

Fácil

Haz que el control deslizante se mueva: guarda su valor en _volume con setState.
Muestra el volumen como un número entero debajo: Volume: 20, no Volume: 20.0.

Pruébalo tú mismo

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)),
          ],
        ),
      ),
    );
  }
}