Einen Wert mit einem Schieberegler auswählen

Teil des Abschnitts Apps interaktiv gestalten der Flutter-Journey von Coddy. Lektion 29 von 34.

Ein Slider wählt durch Ziehen eine Zahl aus einem Bereich aus. Wie ein Schalter zeigt er seinen value: an und ruft onChanged mit dem neuen Wert auf:

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

min: und max: sind die beiden Endpunkte. divisions: sorgt dafür, dass der Wert in Schritten springt: 5 Teilungen von 0 bis 50 ergeben 0, 10, 20, 30, 40 und 50. Ohne diese Angabe ist jeder Zwischenwert möglich. Du kannst auch auf die Schiene tippen, und der Schieberegler springt an diese Stelle.

Der Wert ist immer ein double, daher wird er als 20.0 angezeigt. _size.round() rundet ihn auf die nächste ganze Zahl, einen int, der als 20 angezeigt wird.

Aufgabe

Einfach

Sorge dafür, dass sich der Schieberegler bewegt: Speichere seinen Wert mit setState in _volume.
Zeige darunter die Lautstärke als ganze Zahl an: Volume: 20, nicht Volume: 20.0.

Probier es selbst

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