expandable_slider 1.0.3

  • Readme
  • Changelog
  • Example
  • Installing
  • new64

expandable_slider #


A Flutter slider that can be expanded to select values with more precision.

Pub Build Status codecov


Features #

  • The ExpandableSlider can have two status: shrunk and expanded.
  • When shrunk, ExpandableSlider behaves just like a Flutter's discrete Slider.
  • When expanded, ExpandableSlider will always have visible divisions whose spacing will always be enough for the user to move the slider thumb between divisions easily.
  • Customizable min, max, and value change between divisions.
  • Customizable expansion, shrinkage and expanded scrolling animations.
  • Expansion can be toggled with a long press, a scale gesture, or a double tap.
  • Just like Flutter's Slider, the appearance can be fully customized with SliderTheme and SliderThemeData.

Usage #

This package exposes an ExpandableSlider stateful widget for you to use wherever you want, just like a regular Slider.

    Widget build(BuildContext context) => ExpandableSlider(
        value: myValue,
        onChanged: (newValue) => setState(() => myValue = newValue),
        min: 0,
        max: 50,
        estimatedValueStep: 5,

By default, the expansion will be toggled with either a long press on the slider or a scale gesture. Check out the example app in the project repository to find out more.

Getting started #

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

  expandable_slider: "^1.0.0"

Then run $ flutter pub get. In your library, add the following import:

import 'package:expandable_slider/expandable_slider.dart';

Author #

Diego Rogel - GitHub

Changelog #

Check the Changelog page to see what's recently changed.

License #

This project is licensed under the MIT License - see the LICENSE.md file for details.

[1.0.3] - March 2020 #

  • Adds isExpanded flag to ExpandableSliderController, to check if the ExpandableSlider is expanded or not.

[1.0.2] - March 2020 #

  • Adds multiple listeners to ExpandableSliderController, so that one controller can control several sliders.

[1.0.1] - March 2020 #

  • Adds ExpandableSliderController class to control the slider's expansion and shrinkage animations.

[1.0.0] - March 2020 #

  • Initial Open Source release.


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

void main() => runApp(ExpandableSliderExampleApp());

class ExpandableSliderExampleApp extends StatelessWidget {
  Widget build(BuildContext context) => MaterialApp(
        title: 'Expandable slider example',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: Scaffold(
          appBar: AppBar(
            title: const Text("Expandable slider sample app"),
          body: const Example(max: 100, min: 0),

class Example extends StatefulWidget {
  const Example({@required this.max, @required this.min});

  final double max;
  final double min;

  _ExampleState createState() => _ExampleState();

class _ExampleState extends State<Example> {
  double _value;

  void initState() {
    _value = widget.min;

  Widget build(BuildContext context) => Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text("Current slider value:"),
              style: Theme.of(context).textTheme.display1,
            const SizedBox(height: 32),
              value: _value,
              onChanged: _onChanged,
              min: widget.min,
              max: widget.max,
              estimatedValueStep: 1,
            const SizedBox(height: 32),
              onPressed: () => _onChanged(widget.max / 2),
              child: const Text("Jump to half"),

  void _onChanged(double newValue) => setState(() => _value = newValue);

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  expandable_slider: ^1.0.3

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:expandable_slider/expandable_slider.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Mar 31, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies