Creating Custom Reusable Widgets in Flutter
Notes: 06. Code the Seek Bar Interaction
The values can also be initialised in the initState() method. So if you create a variable without value or initialisation. Initialise them inside the initState() function, or use late keyword. Late keyword helps in initalisation of the varibale later in the apps lifecycle. Be cautious when you use late keyword.
The students materials have been reviewed and are updated as of September 2022.
The update material uses null safety and also proper use of const and final keywords as per the latest Flutter guidelines. This is to encourage the students to use the latest Flutter best practices.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Demo
Let’s implement the seek bar which is the slider.
We’ll be doing this now because the current and total times labels depend on it.
For this, we’ll add two state variables to the _AudioWidgetState class. (Do that now)
// The values should be initialised when they are declared.
// If you not initialising them here, you can initialise them in the initState() method.
// Right now to create a variable without the value it can either be an optional
// or a late variable. We are using optional variable here.
double? _sliderValue;
bool? _userIsMovingSlider;
double _getSliderValue() {
if (widget.currentTime == null) {
return 0;
}
return widget.currentTime.inMilliseconds! / widget.totalTime.inMilliseconds;
}
Duration _getCurrentDuration(double sliderValue) {
final seconds = widget.totalTime.inSeconds * sliderValue;
return Duration(seconds: seconds.toInt());
}
@override
void initState() {
super.initState();
_sliderValue = _getSliderValue();
_userIsMovingSlider = false;
}
if (!_userIsMovingSlider) {
_sliderValue = _getSliderValue();
}
...
Expanded _buildSeekBar(BuildContext context) {
return Expanded(
child: Slider(
value: _sliderValue,
activeColor: Theme.of(context).textTheme.bodyText2.color,
inactiveColor: Theme.of(context).disabledColor,
onChangeStart: (value) {
_userIsMovingSlider = true;
},
onChanged: (value) {
setState(() {
_sliderValue = value;
});
},
onChangeEnd: (value) {
_userIsMovingSlider = false;
if (widget.onSeekBarMoved != null) {
final currentTime = _getDuration(value);
widget.onSeekBarMoved!(currentTime);
}
},
),
);
}
...