Creating Custom Reusable Widgets in Flutter

Sep 14 2022 · Dart 2.18.0, Flutter 3.3.0, Android Studio Chipmunk 2021.2.1 & VS Code 1.70.2 Universal

Part 1: Creating Custom Reusable Widgets in Flutter

06. Code the Seek Bar Interaction

Episode complete

Play next episode

About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 05. Implement the Play Button Next episode: 07. Update the Labels

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

Take your career further with a Kodeco Personal Plan. 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.

Learn more Already a subscriber? Sign in.

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've reached locked video content where the transcript will be shown as obfuscated text.


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());
void 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);