Welcome to this tutorial on the Flutter RangeSlider widget! In this tutorial, we’ll explore how to create interactive range sliders that allow users to select a range of values.
The RangeSlider widget is a powerful tool for scenarios where you need users to choose a span of values, such as selecting a date range, price range, or any other numeric interval.
Prerequisites
Before we begin, make sure you have the following prerequisites:
- Flutter and Dart SDK installed on your machine.
- A code editor such as Visual Studio Code or Android Studio.
Getting Started
To get started, create a new Flutter project and replace the content of the lib/main.dart file with the following code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: RangeSliderTutorial(),
);
}
}
class RangeSliderTutorial extends StatefulWidget {
@override
_RangeSliderTutorialState createState() => _RangeSliderTutorialState();
}
class _RangeSliderTutorialState extends State<RangeSliderTutorial> {
RangeValues _selectedRange = RangeValues(20, 80);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('RangeSlider Tutorial')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RangeSlider(
values: _selectedRange,
min: 0,
max: 100,
onChanged: (RangeValues newRange) {
setState(() {
_selectedRange = newRange;
});
},
labels: RangeLabels('${_selectedRange.start}', '${_selectedRange.end}'),
divisions: 10,
activeColor: Colors.blue,
inactiveColor: Colors.grey,
),
SizedBox(height: 20),
Text(
'Selected Range: ${_selectedRange.start} - ${_selectedRange.end}',
style: TextStyle(fontSize: 18),
),
],
),
),
);
}
}Here’s a detailed explanation of the properties of the Flutter RangeSlider widget, along with their usage and examples:
RangeSlider(
values: _selectedRange,
min: 0,
max: 100,
onChanged: (RangeValues newRange) {
setState(() {
_selectedRange = newRange;
});
},
labels: RangeLabels('${_selectedRange.start}', '${_selectedRange.end}'),
divisions: 10,
activeColor: Colors.blue,
inactiveColor: Colors.grey,
)
values (required)
- Type: RangeValues
- Defines the current selected range.
- You can initialize it with a RangeValues object representing the initial selected range.
- Example: values: RangeValues(20, 80)
min (required)
- Type: double
- Specifies the minimum value of the slider’s range.
- Example: min: 0
max (required)
- Type: double
- Specifies the maximum value of the slider’s range.
- Example: max: 100
onChanged (required)
- Type: ValueChanged
- A callback function that is called whenever the user interacts with the slider and changes the selected range.
- Typically used to update the UI based on the new selected range.
- Example
onChanged: (RangeValues newRange) {
setState(() {
_selectedRange = newRange;
});
}labels
- Type: RangeLabels
- Provides labels for the start and end values of the selected range.
- Labels are displayed on the thumbs and can enhance user understanding.
- Example: labels: RangeLabels(‘Start’, ‘End’)
divisions
- Type: int
- Divides the slider into discrete divisions for more precise selection.
- Each division has a corresponding tick mark.
- Example: divisions: 10
activeColor
- Type: Color
- Specifies the color of the active part of the slider, i.e., the portion between the two thumbs.
- Example: activeColor: Colors.blue
inactiveColor
- Type: Color
- Specifies the color of the inactive part of the slider, i.e., the portions outside the selected range.
- Example: inactiveColor: Colors.grey
thumbColor
- Type: Color
- Sets the color of the slider thumbs (handles).
- It’s recommended to use activeColor for consistent styling.
- Example: thumbColor: Colors.blue
thumbShape
- Type: SliderComponentShape
- Defines the shape of the thumbs.
- Can be customized using classes like RoundSliderThumbShape, RectangularSliderThumbShape, etc.
thumbShape: RoundSliderThumbShape(enabledThumbRadius: 10)
overlayColor
- Type: Color
- Specifies the color of the overlay that appears on the thumbs when they are pressed.
- Example: overlayColor: Colors.blue.withOpacity(0.2)
overlayShape
- Type: SliderComponentShape
- Defines the shape of the overlay that appears on the thumbs when they are pressed.
- Can be customized similarly to thumbShape.
tickMarkShape
- Type: SliderTickMarkShape
- Defines the shape of the tick marks on the slider track.
tickMarkShape: RoundSliderTickMarkShape(tickMarkRadius: 5)
trackHeight
- Type: double
- Specifies the height of the slider track.
- Example: trackHeight: 5
trackShape
- Type: SliderTrackShape
- Defines the shape of the slider track.
trackShape: RoundedRectSliderTrackShape()
semanticFormatterCallback
- Type: SemanticFormatterCallback
- Defines how the slider’s value is presented for screen readers.
semanticFormatterCallback: (double value) {
return '${value.toInt()} dollars';
}showValueIndicator
- Type: ShowValueIndicator
- Specifies when to display a value indicator above the active thumb.
- Values: ShowValueIndicator.onlyForDiscrete, ShowValueIndicator.onlyForContinuous, ShowValueIndicator.always, ShowValueIndicator.never
- Example: showValueIndicator: ShowValueIndicator.always
The RangeSlider widget in Flutter provides a range selection mechanism with various customizable properties. By utilizing these properties, you can create visually appealing and interactive range sliders that enhance the user experience in your Flutter applications. Experiment with different combinations of properties to achieve the desired look and behavior for your app’s range slider components. Happy coding!
Related Posts
Creating a Radio Widget in Flutter
Mastering FlatButton in Flutter