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

07. Update the Labels

Episode complete

About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 06. Code the Seek Bar Interaction

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: 07. Update the Labels

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.

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';
}
import 'dart:ui';
...
Text _buildCurrentTimeLabel() {
  return Text(
    _getTimeString(_sliderValue),
    style: TextStyle(
      fontFeatures: [FontFeature.tabularFigures()],
    ),
  );
}
Text _buildTotalTimeLabel() {
  return Text(
    _getTimeString(1.0),
  );
}