discrete_slider 1.0.5 copy "discrete_slider: ^1.0.5" to clipboard
discrete_slider: ^1.0.5 copied to clipboard

Step sliders with custom labels, colors and smooth animations — ideal for ratings & progress.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:discrete_slider/discrete_slider.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DiscreteSliderController _controller = DiscreteSliderController();
  DiscreteSliderController _sliderController = DiscreteSliderController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  change() {
    _controller.moveTo(2);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            children: <Widget>[
              SizedBox(height: 100),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 30),
                child: DiscreteSlider(
                  steps: 2,
                  labels: ["Low", "Medium", "High"],
                  onChanged: (i) {},
                  labelTextStyle: TextStyle(fontSize: 20),
                ),
              ),
              SizedBox(height: 100),
              DiscreteSlider(
                controller: _controller,
                steps: 4,
                onChanged: (i) {
                  setState(() {
                    print(i);
                  });
                },
                trackWidth: 20,
                labelTextStyle: TextStyle(fontSize: 20),
                inActiveTrackColor: Colors.grey.shade300,
                activeTrackColor: Colors.grey.shade500,
                labelBorderRadius: 18,
              ),
              SizedBox(height: 20),
              Padding(
                padding: const EdgeInsets.all(20.0),
                child: Row(
                  children: [
                    Expanded(
                      child: ElevatedButton(
                        onPressed: change,
                        child: Text("Change to 2"),
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(height: 30),
              Padding(
                padding: const EdgeInsets.all(20),
                child: DiscreteSlider(
                  controller: _sliderController,
                  steps: 6,
                  onChanged: (i) {
                    setState(() {
                      print(i);
                    });
                  },
                  trackWidth: 10,
                  labelTextStyle: TextStyle(fontSize: 14),
                  inActiveColor: Colors.red.shade300,
                  inActiveTrackColor: Colors.grey.shade300,
                  activeTrackColor: Colors.red,
                  activeColor: Colors.red.shade900,
                  labelBorderRadius: 12,
                ),
              ),
              SizedBox(height: 30),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: DiscreteSlider(
                  steps: 3,
                  labels: ["Off", "Low", "Medium", "High"],
                  onChanged: (level) {
                    print("Volume level: $level");
                  },
                  trackWidth: 8,
                  height: 40,
                  labelBorderRadius: 20,
                  activeTrackColor: Colors.green,
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(20.0),
                child: DiscreteSlider(
                  controller: _controller,
                  steps: 4,
                  labels: ["Start", "25%", "50%", "75%", "Complete"],
                  onChanged: (_) {}, // Read-only in this case
                  activeTrackColor: Colors.blue,
                  inActiveTrackColor: Colors.grey.shade300,
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(30.0),
                child: DiscreteSlider(
                  steps: 4,
                  labels: ["Poor", "Fair", "Good", "Great", "Excellent"],
                  onChanged: (rating) {
                    print("Rating: ${rating + 1} stars");
                  },
                  activeTrackColor: Colors.amber,
                  labelTextStyle: TextStyle(
                    fontSize: 16,
                    color: Colors.amber.shade700,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
3
likes
160
points
171
downloads
screenshot

Publisher

verified publisheroddbuddy.com

Weekly Downloads

Step sliders with custom labels, colors and smooth animations — ideal for ratings & progress.

Repository (GitHub)
View/report issues

Topics

#slider #discrete #labeled #step #customizable

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on discrete_slider