Scegliere un valore con un cursore

Fa parte della sezione Rendere l’app interattiva del percorso Flutter di Coddy. Lezione 29 di 34.

Un Slider permette di scegliere un numero da un intervallo trascinando il cursore. Come uno switch, mostra il suo value: e chiama onChanged con il nuovo valore:

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

min: e max: sono i due estremi. divisions: fa procedere a scatti: 5 divisioni da 0 a 50 significano 0, 10, 20, 30, 40 e 50. Senza questa impostazione, è possibile scegliere qualsiasi valore intermedio. Puoi anche toccare la traccia e il cursore si sposta in quel punto.

Il valore è sempre un double, quindi viene mostrato come 20.0. _size.round() lo arrotonda al numero intero più vicino, un int, che viene mostrato come 20.

Sfida

Facile

Fai muovere il cursore: memorizza il suo valore in _volume con setState.
Mostra il volume come numero intero sotto di esso: Volume: 20, non Volume: 20.0.

Provalo tu

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