May

Flutter Fluid Slider

Flutter Fluid Slider:

In this tutorial, we are going to study a Flutter Fluid Slide. Fluid Slider in Flutter is just a slider. when we move this slider it looks like we are moving above the liquid like water. Flutter Fluid Slider is used for a range of values to select and filter that range values.

Implementing Fluid Slider in Flutter:

Add the dependency package:

To implement fluid slider functionality in flutter add the dependency package to pubspec.yaml file. use the below code to add dependency package. After adding the dependency package run the get package method to import all the required files to the app.

dependencies:
flutter_fluid_slider: ^1.0.0

Install the package:

You can install the package from the command line using the below code with Flutter as shown.

$ flutter packages get

Importing the Package:

After, Adding the dependency package to the pubspec.yaml file, you can now import the package into the dart code by using the below code. without adding the dependency package to the pubspec.yaml file if you import it will show package not found an error.

import 'package:flutter_fluid_slider/flutter_fluid_slider.dart';

Creating the Fluid Slider In Flutter:

Use the below code to create a fluid slider functionality.

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

Properties used in creating the Flutter Fluid Slider:

value : It displays the currently selected value for this slider. The slider’s thumb is drawn at a position that corresponds to this value which is a current position value.
min : The minimum value the user can select. this value Must be less than or equal to max value.
max : The maximum value the user can select. which is Must be less than or equal to min value.
start : The widget used to display as the min label. For Example, an Icon can be displayed. If not provided the min value is to be displayed.
end : The widget used to be displayed as the max label. For eg: an Icon can be displayed. If we have not provided the max value then displayed as text.
onChanged : this will be displayed or Called during a drag when the user is selecting a new value from the range 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 : This method will be 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 : This method will be Called when the user is done selecting a new value for the slider.
labelsTextStyle : This method used for styling of the min and max text that gets displayed on the fluid slider. If we did not provide the ancestor Theme‘s accentTextTheme text style will be applied to it.
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 : this method used for selecting the silder color. 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.

Complete Example code for Flutter Fluid Slider:

Copy and Paste the below code into your main.dart file

main.dart

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

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}

class HomePage extends StatefulWidget {
@override
HomePageState createState() {
return new HomePageState();
}
}

class HomePageState extends State {
double _value1 = 0.0;
double _value2 = 10.0;

@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(30.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
FluidSlider(
value: _value1,
onChanged: (double newValue) {
setState(() {
_value1 = newValue;
});
},
min: 0.0,
max: 100.0,
),
SizedBox(
height: 100.0,
),
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,
),
),
],
),
),
);
}
}

Congratulations You Have Learned Creating Flutter Fluid Slider….!!!

If It Is Helpful Share It With Your Friends….!!!

PrevNext