dynamic_slider

A custom implementation of Slider widget in Flutter that accepts values on a sliding scale. The default Slider widget only accepts values in equal increments. dynamic_slider provides a mechanism to input values which may not be of equal increments.

Features

  • 4 different types of customizable widgets.
  • Each dynamic_slider widget can accept input values based on a sliding scale. For example, the following input is a valid input: [5,8,10,15,18,30,50,60,80,100]
  • Customizable attributes to change trackColor, thumbCircleColor,activeTrackColor,tickMarkRadius and more!
  • rating_dynamic_slider which supports emojis!

Install

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  dynamic_slider: <latest_version>

Add then following import:

import 'package:dynamic_slider/custom_thumb_dynamic_slider.dart';

Getting Started

Example:

import 'package:example/screens/custom_thumb_dynamic_slider_screen.dart';
import 'package:example/screens/dynamic_slider_screen.dart';
import 'package:example/screens/labeled_slider_screen.dart';
import 'package:example/screens/rating_dynamic_slider_screen.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dynamic Slider Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Dynamic Slider'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  void _navigateToScreen(BuildContext context, Widget widget) {
    Navigator.of(context).push(MaterialPageRoute(builder: (context) => widget));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: () {
                  _navigateToScreen(context, const DynamicSliderScreen());
                },
                child: const Text("Dynamic Slider")),
            ElevatedButton(
                onPressed: () {
                  _navigateToScreen(context, const LabeledDynamicSliderScreen());
                },
                child: const Text("Labeled Dynamic Slider")),
            ElevatedButton(
                onPressed: () {
                  _navigateToScreen(context, const RatingDynamicSliderScreen());
                },
                child: const Text("Rating Dynamic Slider")),
            ElevatedButton(
                onPressed: () {
                  _navigateToScreen(context, const CustomThumbDynamicSliderScreen());
                },
                child: const Text("Custom Thumb Dynamic Slider")),
          ],
        ),
      ),
    );
  }
}

Demo

Contributions

Feel free to contribute to this project.

  • If you find a bug or want have a new feature request, please file an issue.
  • If you fixed a bug or implemented a feature, please send a pull request.

Libraries

custom_thumb_dynamic_slider
dynamic_slider
labeled_dynamic_slider
rating_dynamic_slider