Pilih Nilai dengan Slider

Termasuk bagian Membuat Aplikasi Interaktif dalam perjalanan Flutter di Coddy. Pelajaran 29 dari 34.

Slider memilih angka dari suatu rentang dengan cara digeser. Seperti switch, Slider menampilkan value: dan memanggil onChanged dengan nilai yang baru:

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

min: dan max: adalah kedua ujung rentang. divisions: membuatnya melompat dalam beberapa langkah: 5 bagian dari 0 hingga 50 berarti 0, 10, 20, 30, 40, dan 50. Tanpa itu, semua nilai di antaranya bisa dipilih. Kamu juga bisa mengetuk trek, lalu slider akan melompat ke sana.

Nilainya selalu berupa double, jadi ditampilkan sebagai 20.0. _size.round() membulatkannya ke bilangan bulat terdekat, yaitu int, yang ditampilkan sebagai 20.

Tantangan

Mudah

Buat slider bergerak: simpan nilainya di _volume dengan setState.
Tampilkan volume sebagai bilangan bulat di bawahnya: Volume: 20, bukan Volume: 20.0.

Coba sendiri

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