Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rvamsikrishna/flutter_fluid_slider
A fluid design slider that works just like the Slider material widget.
https://github.com/rvamsikrishna/flutter_fluid_slider
fluid-slider flutter flutter-plugin slider widget
Last synced: 3 months ago
JSON representation
A fluid design slider that works just like the Slider material widget.
- Host: GitHub
- URL: https://github.com/rvamsikrishna/flutter_fluid_slider
- Owner: rvamsikrishna
- License: mit
- Created: 2018-10-27T10:43:32.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-01-03T08:07:11.000Z (about 3 years ago)
- Last Synced: 2024-07-31T15:01:38.537Z (6 months ago)
- Topics: fluid-slider, flutter, flutter-plugin, slider, widget
- Language: Dart
- Size: 72.3 KB
- Stars: 322
- Watchers: 5
- Forks: 47
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-flutter-cn - Fluid Slider - 具有最小设计和流体状动画的滑块，由 [Vamsi Krishna](https://github.com/rvamsikrishna)提供。 (组件 / UI)
- awesome-material-design - flutter_fluid_slider - Animated slider (Flutter / Components)
- awesome-flutter - Fluid Slider - A fluid design slider that works just like the Slider material widget. ` 📝 a year ago` (UI [🔝](#readme))
- awesome-flutter-cn - Fluid Slider - 一个基于 minimal design 具有液体动画效果的滑块，[Vamsi Krishna](https://github.com/rvamsikrishna). (组件 / UI)
README
# Fluid Slider for Flutter
Inspired by a dribbble by [Virgil Pana](https://dribbble.com/virgilpana).
A fluid design slider that works just like the [Slider](https://docs.flutter.io/flutter/material/Slider-class.html) material widget.
Used to select from a range of values.
## Installation
Just add the package to your dependencies in the `pubspec.yaml` file:
```yaml
dependencies:
flutter_fluid_slider: ^1.0.2
```
### Basic Usage
Place the `FluidSlider` in your widget tree.
```dart
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`.
- `mapValueToString` : called with value for the String to be rendered in the slider's thumb. E.g. display roman integers as follows:
```dart
FluidSlider(
value:_val,
min:1.0,
max:5.0,
onChanged:(){},
mapValueToString: (double value){
List romanNumerals=['I', 'II', 'III', 'IV', 'V'];
return _romanNumerals[value.toInt() - 1];
}
)
```
See [example](https://github.com/rvamsikrishna/flutter_fluid_slider/blob/master/example/lib/main.dart#L82). If null the value is converted to String based on [showDecimalValue].
#### Credits:
- [Ramotion](https://dribbble.com/shots/5343166-Fluid-Slider-Optimized-iOS-Control-Open-Source) - implementation for ios and android
- [Virgil Pana](https://dribbble.com/virgilpana) - creating the original concept