Выбираем значение ползунком

Часть раздела Добавляем интерактивность путешествия по Flutter на Coddy. Урок 29 из 34.

Slider выбирает число из диапазона перетаскиванием. Как и переключатель, он отображает своё value: и вызывает onChanged с новым значением:

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

min: и max: — это границы диапазона. divisions: задаёт шаги: 5 делений от 0 до 50 означают значения 0, 10, 20, 30, 40 и 50. Без этого параметра возможно любое промежуточное значение. Можно также коснуться дорожки, и ползунок переместится в это место.

Значение всегда имеет тип double, поэтому отображается как 20.0. _size.round() округляет его до ближайшего целого числа типа int, которое отображается как 20.

Задание

Легко

Сделайте так, чтобы ползунок перемещался: сохраняйте его значение в _volume с помощью setState.
Показывайте громкость под ним целым числом: Volume: 20, а не Volume: 20.0.

Попробуйте сами

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