Chọn giá trị bằng thanh trượt

Thuộc phần Tạo tính tương tác trong hành trình Flutter của Coddy. Bài học 29 trên 34.

Slider chọn một số trong một phạm vi bằng cách kéo. Giống như công tắc, nó hiển thị value: và gọi onChanged với giá trị mới:

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

min: và max: là hai đầu mút. divisions: khiến thanh trượt nhảy theo từng bước: 5 khoảng chia từ 0 đến 50 nghĩa là 0, 10, 20, 30, 40 và 50. Nếu không có thuộc tính này, mọi giá trị ở giữa đều có thể chọn. Bạn cũng có thể chạm vào rãnh để thanh trượt nhảy đến đó.

Giá trị luôn là double, nên nó hiển thị là 20.0. _size.round() làm tròn giá trị đến số nguyên gần nhất, một int, hiển thị là 20.

Thử thách

Dễ

Điều khiển thanh trượt: lưu giá trị của nó vào _volume bằng setState.
Hiển thị âm lượng dưới thanh trượt dưới dạng số nguyên: Volume: 20, không phải Volume: 20.0.

Tự làm thử

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