Get immediate access to this and 4,000+ other videos and books.

Take your career further with a raywenderlich.com Pro subscription. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it’s simply the best investment you can make in your development career.

Code the Seek Bar Interaction Pro

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.

Add the logic that updates the position and dependent data for the audio player’s seek bar.

Contributors

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

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);
        }
      },
    ),
  );
}
...

Reviews

Comments