Flutter allows you to make lovely, natively compiled applications. The explanation Flutter can do this is that Flutter loves Material. Material is a plan framework that helps assemble high-quality, digital encounters. As UI configuration keeps developing, Material keeps on refreshing its components, motion, and plan framework.
Flutter, as a rule, has been amazingly generous to the extent of giving customization choices to User Interface Components are concerned. Sliders are no special case for this rule.
In this article, we will Explore Fluid Slider In Flutter. We will also implement a demo program of the fluid slider and properties using the flutter_fluid_slider package in your flutter applications.
flutter_fluid_slider | Flutter Package
Inspired by a dribble by Virgil Pana. A fluid design slider that works just like the Slider material widget. Used to…pub. dev
Table Of Contents :
Fluid Slider :
Fluid Slider is a fluid design slider that works very much like the Slider material widget. It is utilized to choose from a range of values. Below demo video shows how to create a fluid slider in a flutter. It shows how the fluid slider carousel will work using the flutter_fluid_slider package in your flutter applications. It shows a three-fluid slider with a different color and uses different working properties for users. It will be shown on your device.
Demo Module :
Properties :
There are few properties of fluid slider are :
- > onChanged: This property is required and used to call 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.
- > value: This property is required and used to the currently selected value for this slider. The slider’s thumb is drawn at a position that corresponds to this value.
- > min: This property is used to the minimum value the user can select.
Defaults to 0.0. Must be less than or equal to [max]. - > max: This property is used to the maximum value the user can select.
Defaults to 1.0. Must be greater than or equal to [min]. - > sliderColor: This property is used to the color of the slider. If not provided,
primaryColorwill applied the ancestor theme. - > thumbColor: This property is used to the color of the thumb.
If not provided, the [Colors was white] will be applied. - > onChangeStart: This property is called when the user starts to select a new value for the slider.
- > onChangeEnd: This property is called when the user is done selecting a new value for the slider.
Implementation :
Step 1: Add the dependencies
Add dependencies to pubspec yaml file.
dependencies:
flutter_spinwheel:
Step 2: Import
import 'package:flutter_spinwheel/flutter_spinwheel.dart';
Step 3: Run flutter packages in your app’s root directory.
How to implement code in dart file :
You need to implement it in your code respectively :
Create a new dart file called home_page.dart inside the lib folder.
First, we will create three double variables for three fluid sliders.
double _value1 = 0.0;
double _value2 = 20.0;
double _value3 = 1.0;
We will create a simple FluidSlider(). Inside, we will add value means the currently selected value for this slider. Add the variable you will create for the fluid slider. We will add onChanged means call when the user starts selecting a new value for the slider. Inside, we will add setState(). In the setState, we will add a variable that is equal to the new value.
FluidSlider(
value: _value1,
onChanged: (double newValue) {
setState(() {
_value1 = newValue;
});
},
min: 0.0,
max: 100.0,
sliderColor: Colors.cyan,
),
We will add a min and max value. Also, we will add a slider color. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Now, we will create another FluidSlider(). Inside, we will add a variable in the value method; max means the maximum value is the value the user can select and be greater than or equal to the min value. Add a slider color and thumb color. In this slider, we will add start means the widget to be displayed as the min label. We will display a money-off icon. If not provided the min value is displayed as text.
FluidSlider(
value: _value2,
onChanged: (double newValue) {
setState(() {
_value2 = newValue;
});
},
min: 0.0,
max: 200.0,
sliderColor: Colors.pinkAccent,
thumbColor: Colors.amber[200],
start: Icon(
Icons.money_off,
color: Colors.white,
),
end: Icon(
Icons.attach_money,
color: Colors.white,
),
),
We will add the end means the widget to be displayed as the max label. We will display an attach-money icon. If not provided, the max value is displayed as text. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Now, we will create a third Fluid slider. In this slider, we will add a variable in the value method, slider color, onChanged, mapValueToString means callback function to map the double values to String texts. If null, the value is converted to String based on [showDecimalValue]. We will create a list of string numbers 1 to 10 and return numbers.
FluidSlider(
value: _value3,
sliderColor: Colors.teal,
onChanged: (double newValue) {
setState(() {
_value3 = newValue;
});
},
min: 1.0,
max: 10.0,
mapValueToString: (double value) {
List<String> numbers = ['1', '2', '3', '4', '5','6', '7', '8', '9', '10'];
return numbers[value.toInt() - 1];
}),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Hence, we will use some property in these sliders. There are many ways to used these sliders for your flutter application with different ways and properties. When we run the application, we ought to get the screen’s final output like the underneath screen capture.
Code File :
import 'package:flutter/material.dart';
import 'package:flutter_fluid_slider/flutter_fluid_slider.dart';
class HomePage extends StatefulWidget {
@override
HomePageState createState() {
return new HomePageState();
}
}
class HomePageState extends State<HomePage> {
double _value1 = 0.0;
double _value2 = 20.0;
double _value3 = 1.0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Fluid Slider Demo"),
automaticallyImplyLeading: false,
),
body: Padding(
padding: const EdgeInsets.all(30.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
FluidSlider(
value: _value1,
onChanged: (double newValue) {
setState(() {
_value1 = newValue;
});
},
min: 0.0,
max: 100.0,
sliderColor: Colors.cyan,
),
SizedBox(
height: 50.0,
),
FluidSlider(
value: _value2,
onChanged: (double newValue) {
setState(() {
_value2 = newValue;
});
},
min: 0.0,
max: 200.0,
sliderColor: Colors.pinkAccent,
thumbColor: Colors.amber[200],
start: Icon(
Icons.money_off,
color: Colors.white,
),
end: Icon(
Icons.attach_money,
color: Colors.white,
),
),
SizedBox(
height: 50.0,
),
FluidSlider(
value: _value3,
sliderColor: Colors.teal,
onChanged: (double newValue) {
setState(() {
_value3 = newValue;
});
},
min: 1.0,
max: 10.0,
mapValueToString: (double value) {
List<String> numbers = ['1', '2', '3', '4', '5','6', '7', '8', '9', '10'];
return numbers[value.toInt() - 1];
}),
],
),
),
);
}
}
Conclusion :
In the article, I have explained the Fluid Slider basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Fluid Slider On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Fluid Slider in your flutter projects. We will show you what the Fluid Slider is?. Some fluid slider properties, make a demo program for working Fluid Slider and show three sliders with different colors and properties using the flutter_fluid_slider package in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Fluid Slider Demo:
flutter-devs/flutter_fluid_slider_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
From Our Parent Company Aeologic
Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.
Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
