Creating Custom Reusable Widgets in Flutter

Demo

Currently, we can change the current time by passing it through the constructor but we want to be able to update it whenever we move the slider. Since the slider should always stay in sync with the current time label, we’ll be using the _getTimeString method to generate the label string. Paste the following code:

String _getTimeString(double sliderValue) {
  final time = _getDuration(sliderValue);
// Use signgle quotes for strings. 
  String twoDigits(int n) {
    if (n >= 10) return '$n';
    return '0$n';
  }

  final minutes = twoDigits(time.inMinutes.remainder(Duration.minutesPerHour));
  final seconds = twoDigits(time.inSeconds.remainder(Duration.secondsPerMinute));

  final hours = widget.totalTime.inHours > 0 ? '${time.inHours}:' : '';
  // Use signgle quotes for strings. 

  return '$hours$minutes:$seconds';
}

This method is actually a modification on Dart’s Duration.toString() method. We just remove some unwanted parts and return a string in our custom format.

Now, as usual, let’s go ahead and extract the Text widget of the currentTime label. Name it _buildCurrentTimeLabel and add the following code:

import 'dart:ui';
...
Text _buildCurrentTimeLabel() {
  return Text(
    _getTimeString(_sliderValue),
    style: TextStyle(
      fontFeatures: [FontFeature.tabularFigures()],
    ),
  );
}

We generate the current time text by passing the sliderValue to the method we just created. Note: FontFeature.tabularFigures() ensures that each character has the same width and this makes the text maintain its width whenever the characters change. Setting this prevents the text from jumping around whenever the current time changes.

Do a hot restart. Let’s try it out. Cool, the current time label updates as we move the slider thumb. Now that we’re done with the current time label. Let’s implement the total time label and i assure you, this would be super simple. First, let’s extract the widget like we always do. And name it _buildTotalTimeLabel. Then update it to the following:

Text _buildTotalTimeLabel() {
  return Text(
    _getTimeString(1.0),
  );
}

The total time must always be 1.0 on the slider because the thumb of the slider must always be at its max value at end of the track. And that’s why we passed 1.0 as the slider value. Then the _getTimeString() method returns the string to display. Do a hot restart. And it looks pretty much the same because we previously passed in the total time argument manually to the AudioWidget. We now have our own custom audio widget skin that is ready to be plugged into any audio plugin.