Creating Custom Reusable Widgets in Flutter
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’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
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),
);
}