Hướng dẫn và ví dụ Flutter Slider

Constructor
Ví dụ
SliderTheme
Slider Event

Trong Flutter, Slider là một widget cho phép người dùng lựa chọn một giá trị số trong một khoảng giá trị. Slider có một cái cần gạt (thumb). Bạn có thể chạm vào cần gạt, sử dụng phím mũi tên hoặc chạm vào thanh bên trái hoặc bên phải để di chuyển cần gạt.

1. Constructor

Slider({
  Key? key,
  required double value,
  double? secondaryTrackValue,
  required void Function(double)? onChanged,
  void Function(double)? onChangeStart,
  void Function(double)? onChangeEnd,
  double min = 0.0,
  double max = 1.0,
  int? divisions,
  String? label,
  Color? activeColor,
  Color? inactiveColor,
  Color? secondaryActiveColor,
  Color? thumbColor,
  MaterialStateProperty<Color?>? overlayColor,
  MouseCursor? mouseCursor,
  String Function(double)? semanticFormatterCallback,
  FocusNode? focusNode,
  bool autofocus = false,
  SliderInteraction? allowedInteraction,
});

min	Giá trị nhỏ nhất của Slider.
max	Giá trị lớn nhất của Slider.
divisions	Số lượng các phân chia rời rạc. Thường được sử dụng với "label" để hiển thị giá trị rời rạc hiện tại. Nếu null, thanh trượt là liên tục.
allowedInteraction	Chỉ định các cách được phép để tương tác với Slider. SliderInteraction (tapAndSlide, tapOnly, slideOnly, slideThumb)

2. Ví dụ

Ví dụ một Slider mặc định:

main_slider_default_ex1.dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SliderExample(),
    );
  }
}

class SliderExample extends StatefulWidget {
  const SliderExample({super.key});

  @override
  State<SliderExample> createState() => _SliderExampleState();
}

class _SliderExampleState extends State<SliderExample> {
  double _currentSliderValue = 20;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Slider Demo'),
        backgroundColor: Colors.blue,
      ),
      body: Slider(
        value: _currentSliderValue,
        max: 100,
        divisions: 10,
        label: _currentSliderValue.round().toString(),
        onChanged: (double value) {
          setState(() {
            _currentSliderValue = value;
          });
        },
      ),
    );
  }
}

Một Slider tuỳ biến:

main_slider_ex2b.dart (**)

class SliderExample extends StatefulWidget {
  const SliderExample({super.key});

  @override
  State<SliderExample> createState() => _SliderExampleState();
}

class _SliderExampleState extends State<SliderExample> {
  double _currentSliderValue = 20;
  Set<MaterialState> _states = {};

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Slider Demo'),
        backgroundColor: Colors.blue,
      ),
      body: Column(
        children: [
          Slider(
            value: _currentSliderValue,
            max: 100,
            divisions: 10,
            activeColor: Colors.red,
            inactiveColor: Colors.red.withAlpha(100),
            secondaryActiveColor: Colors.blue,
            thumbColor: Colors.indigo,
            overlayColor: MaterialStateProperty.resolveWith((states) {
              Future.delayed(const Duration(milliseconds: 100), () {
                _states = states;
                setState(() {});
              });
              // hovered, focused, pressed, dragged,
              // selected, scrolledUnder, disabled, error
              if (states.contains(MaterialState.dragged)) {
                return Colors.pinkAccent.withAlpha(100);
              }
              if (states.contains(MaterialState.pressed)) {
                return Colors.green.withAlpha(100);
              }
              return Colors.yellow.withAlpha(100);
            }),
            label: _currentSliderValue.round().toString(),
            onChanged: (double value) {
              setState(() {
                _currentSliderValue = value;
              });
            },
          ),
          const SizedBox(height: 10),
          const Text("States:"),
          const SizedBox(height: 10),
          Text("$_states"),
        ],
      ),
    );
  }
}

3. SliderTheme

Áp dụng SliderTheme cho phép bạn tuỳ chỉnh sâu hơn cho Slider:

main_slider_theme_ex1.dart (*)

Scaffold(
  appBar: AppBar(
    title: const Text('SliderTheme Demo'),
    backgroundColor: Colors.blue,
  ),
  body: SliderTheme(
    data: SliderTheme.of(context).copyWith(
      activeTrackColor: Colors.blue,
      inactiveTrackColor: Colors.blue.withAlpha(100),
      activeTickMarkColor: Colors.red,
      inactiveTickMarkColor: Colors.red.withAlpha(100),
      thumbColor: Colors.blueAccent,
      overlayColor: Colors.yellow.withAlpha(100),
      valueIndicatorColor: Colors.black,
      trackShape: RectangularSliderTrackShape(),
      trackHeight: 14.0,
      thumbShape: RoundSliderThumbShape(enabledThumbRadius: 12.0),
      overlayShape: RoundSliderOverlayShape(overlayRadius: 28.0),
    ),
    child: Slider(
      value: _currentSliderValue,
      max: 100,
      divisions: 10,
      label: _currentSliderValue.round().toString(),
      onChanged: (double value) {
        setState(() {
          _currentSliderValue = value;
        });
      },
    ),
  ),
);

Xem thêm bài viết về SliderTheme để có thêm các ví dụ hữu ích khác.
Flutter SliderTheme

4. Slider Event

Trong một vài tình huống bạn muốn biết trạng thái hiện tại của một Slider, điều này có thể làm được dựa trên các thuộc tính onChanged, onChangeStart và onChangeEnd.

main_slider_status_ex1.dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SliderExample(),
    );
  }
}

class SliderExample extends StatefulWidget {
  const SliderExample({super.key});

  @override
  State<SliderExample> createState() => _SliderExampleState();
}

class _SliderExampleState extends State<SliderExample> {
  double _value = 20;
  String _status = 'idle';
  Color _statusColor = Colors.amber;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Slider Status Demo'),
        backgroundColor: Colors.blue,
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          const SizedBox(height: 30),
          Slider(
            min: 0.0,
            max: 100.0,
            value: _value,
            divisions: 10,
            onChanged: (value) {
              setState(() {
                _value = value;
                _status = 'active (${_value.round()})';
                _statusColor = Colors.green;
              });
            },
            onChangeStart: (value) {
              setState(() {
                _status = 'start';
                _statusColor = Colors.lightGreen;
              });
            },
            onChangeEnd: (value) {
              setState(() {
                _status = 'end';
                _statusColor = Colors.red;
              });
            },
          ),
          const SizedBox(height: 10),
          Text(
            'Status: $_status',
            style: TextStyle(color: _statusColor),
          ),
        ],
      ),
    );
  }
}