flutter_fluid_slider 1.0.1

Fluid Slider for Flutter #

Awesome Flutter

Inspired by a dribbble by Virgil Pana.

enter image description here

A fluid design slider that works just like the Slider material widget.

Used to select from a range of values.

Installation #

Just add the package to your dependencies in the pubspec.yaml file:

dependencies:
  flutter_fluid_slider: ^0.0.1

Basic Usage #

Place the FluidSlider in your widget tree.

FluidSlider(
  value: _value,
  onChanged: (double newValue) {
    setState(() {
      _value = newValue;
    });
  },
  min: 0.0,
  max: 100.0,
),

Properties #

  • value : [Required] The currently selected value for this slider. The slider's thumb is drawn at a position that corresponds to this value.

  • min : The minimum value the user can select. Defaults to 0.0. Must be less than or equal to max.

  • max : The maximum value the user can select. Defaults to 1.0. Must be less than or equal to min.

  • start : The widget to be displayed as the min label. For eg: an Icon can be displayed. If not provided the min value is displayed as text.

  • end : The widget to be displayed as the max label. For eg: an Icon can be displayed. If not provided the max value is displayed as text.

  • onChanged : [Required] Called during a drag when the user is selecting a new value for the slider

    by dragging.

    • The slider passes the new value to the callback but does not actually change state until the parent widget rebuilds the slider with the new value.

    • If null, the slider will be displayed as disabled.

  • onChangeStart : Called when the user starts selecting a new value for the slider. The value passed will be the last value that the slider had before the change began.

  • onChangeEnd : Called when the user is done selecting a new value for the slider.

  • labelsTextStyle : The styling of the min and max text that gets displayed on the slider. If not provided the ancestor Theme's accentTextTheme text style will be applied.

  • valueTextStyle : The styling of the current value text that gets displayed on the slider. If not provided the ancestor Theme's textTheme.title text style with bold will be applied .

  • sliderColor : The color of the slider. If not provided the ancestor Theme's primaryColor will be applied.

  • thumbColor : The color of the thumb. If not provided the Colors.white will be applied.

  • showDecimalValue : Whether to display the first decimal value of the slider value. Defaults to false.

Credits: #

[0.0.1] - 28th october 2018.

A fluid design slider that works just like the [Slider] material widget.

Used to select from a range of values.

The fluid slider will be disabled if [onChanged] is null.

By default, a fluid slider will be as wide as possible, with a height of 60.0. When given unbounded constraints, it will attempt to make itself 200.0 wide.

[1.0.0] - 11th march 2019

The slider can show first decimal value in tye thumb. Also converted the rendering of the min, max labels from method to its own widget.

[1.0.1] - 9th june 2019

Slider tap bug fixed.

example/README.md

Basic Example #

Import the package and add the FluidSlider to your widget tree

import 'package:flutter_fluid_slider/flutter_fluid_slider.dart';

FluidSlider(
  value: _value1,
  onChanged: (double newValue) {
    setState(() {
      _value1 = newValue;
    });
  },
  min: 0.0,
  max: 100.0,
),

You can also add other widgets like Icon as your min and max labels:

FluidSlider(
  value: _value2,
  onChanged: (double newValue) {
    setState(() {
      _value2 = newValue;
    });
  },
  min: 0.0,
  max: 500.0,
  sliderColor: Colors.redAccent,
  thumbColor: Colors.amber,
  start: Icon(
    Icons.money_off,
    color: Colors.white,
  ),
  end: Icon(
    Icons.attach_money,
    color: Colors.white,
  ),
),

For all the properties, check out the docs.

Use this package as a library

1. Depend on it

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


dependencies:
  flutter_fluid_slider: ^1.0.1

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:flutter_fluid_slider/flutter_fluid_slider.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
88
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
94
Learn more about scoring.

We analyzed this package on Jul 17, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.4.0
  • pana: 0.12.19
  • Flutter: 1.7.8+hotfix.3

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/flutter_fluid_slider.dart.

Run flutter format to format lib/flutter_fluid_slider.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test

Admin