In the world of modern app development, user interaction and engagement are key factors. One effective way to achieve this is by incorporating interactive elements like sliders. Flutter, Google’s UI toolkit, provides the Slider widget that allows developers to easily implement sliders for a variety of purposes.
In this tutorial, we’ll guide you through the process of creating and customizing sliders in Flutter using the Slider widget.
Syntax
The following is a quick code snippet to that defines a Slider widget with different properties set.
Slider(
value: _currentSliderValue,
min: 0,
max: 100,
onChanged: (double value) {
setState(() {
_currentSliderValue = value;
});
},
)
How to use the slider widget :
To use the slider widget, you need to create a Slider widget and set the properties of the widget according to your needs. You can also add an onChanged callback function to the widget to listen for changes in the value of the slider.
Customizing the slider widget :
You can customize the appearance of the slider widget by changing the following properties:
activeColor: The color of the slider thumb when it is active.inactiveColor: The color of the slider thumb when it is inactive.thumbShape: The shape of the slider thumb.trackShape: The shape of the track of the slider.overlayColor: The color of the overlay of the slider.divisions: The number of divisions on the slider.labelFormatter: The function that is used to format the labels of the slider.
Here are some other properties of the Flutter Slider widget:
- labelText: The text that is displayed next to the slider thumb.
- labelPlacement: The position of the label text relative to the slider thumb.
- semanticsLabel: The text that is used for accessibility purposes.
- mouseCursor: The cursor that is displayed when the mouse is over the slider.
- dragStartBehavior: The behavior of the slider when the user starts dragging it.
- enableInteractiveSelection: Whether or not the user can interactively select the value of the slider.
- autofocus: Whether or not the slider should be automatically focused when it is created.
- valueIndicatorFormatter: The function that is used to format the value indicator of the slider.
- divisionsFractionDigits: The number of decimal places that are used to format the values of the divisions.
- visualDensity: The visual density of the slider.
These are just some of the other properties that you can use to customize the appearance and behavior of the Flutter Slider widget.
That is the basic example of the slider widget tutorial.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Slider Widget Tutorial',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Slider Widget Tutorial'),
),
body: Center(
child: Slider(
value: 50,
min: 0,
max: 100,
onChanged: (double value) {
print('The slider value is $value');
},
),
),
),
);
}
}
Description of the code
- The
Sliderwidget is created with the following properties:value: The current value of the slider.min: The minimum value of the slider.max: The maximum value of the slider.onChanged: The callback function that is called when the value of the slider changes.
- The
onChangedfunction is called with the new value of the slider as an argument. - The
print()function is used to print the value of the slider to the console.
Here’s an example that demonstrates various properties of the Slider widget in Flutter:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Slider Properties Example',
home: SliderPropertiesExample(),
);
}
}
class SliderPropertiesExample extends StatefulWidget {
@override
_SliderPropertiesExampleState createState() => _SliderPropertiesExampleState();
}
class _SliderPropertiesExampleState extends State<SliderPropertiesExample> {
double _sliderValue = 50;
double _volume = 50;
RangeValues _rangeValues = RangeValues(20, 80);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Slider Properties Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Basic Slider'),
Slider(
value: _sliderValue,
min: 0,
max: 100,
onChanged: (newValue) {
setState(() {
_sliderValue = newValue;
});
},
),
Text('Custom Appearance Slider'),
Slider(
value: _sliderValue,
min: 0,
max: 100,
onChanged: (newValue) {
setState(() {
_sliderValue = newValue;
});
},
activeColor: Colors.blue,
inactiveColor: Colors.grey,
thumbColor: Colors.blue,
divisions: 5,
),
Text('Range Slider'),
RangeSlider(
values: _rangeValues,
min: 0,
max: 100,
onChanged: (newRange) {
setState(() {
_rangeValues = newRange;
});
},
),
Text('Volume Control Slider'),
Slider(
value: _volume,
min: 0,
max: 100,
onChanged: (newVolume) {
setState(() {
_volume = newVolume;
});
},
label: _volume.round().toString(),
semanticFormatterCallback: (double newValue) => '${newValue.round()} volume',
),
],
),
),
);
}
}
Conclusion
The Flutter Slider widget is a versatile widget that can be used to select a range of values in a variety of ways. It is a simple widget to use, but it can be customized to meet the specific needs of your application.
Related Posts
The Basics of Flutter Scaffold
Flutter RangeSlider Widget Tutorial
Creating a Radio Widget in Flutter