Creating Custom Reusable Widgets in Flutter
Notes: 05. Implement the Play Button
Final variables should be initialized when declared before use. When declaring variables without initialisation, they can be initalised in the constuctor. The constructor is called when the widget is created. The parameter can either be required or optional. The required keyword is used to make the parameter as required and “?” is used to make the parameter optional.
To use the optional paramters we need to check if they are null or not. Usually done
by if else case. When using the optional variable you have tell the compiler that
you are sure the value is not null. That is done by appending a bang operator “!” with the variable.
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
Now that we’re done with the design and have determined the possible interactions for this widget, we need to start defining the parameters that we would expose to developers that would be using it.
Demo
The AudioWidget is currently a stateless widget.
We need a way to keep track of the slider’s state internally.
A stateless widget doesn’t have a mutable state so we’ll convert the AudioWidget to a stateful widget.
...
// As per the Flutter lint rules the final variables should be initialized.
// That is why they are initialised in the constructor.
// The constructor is called when the widget is created.
// The parameter can either be required or optional.
// The required keyword is used to make the parameter required.
// And "?" is used to make the parameter optional.
final bool? isPlaying;
final ValueChanged<bool>? onPlayStateChanged;
final Duration? currentTime;
final ValueChanged<Duration>? onSeekBarMoved;
final Duration totalTime;
const AudioWidget({
Key key,
this.isPlaying = false,
this.onPlayStateChanged,
this.currentTime,
this.onSeekBarMoved,
required this.totalTime,
}) : super(key: key);
...
return AudioWidget(
totalTime: Duration(minutes: 1, seconds: 15),
);
IconButton _buildPlayPauseButton() {
return IconButton(
icon:
(widget.isPlaying)
? Icon(Icons.pause)
: Icon(Icons.play_arrow),
color: Colors.white,
onPressed: () {
// TO use optional parameters we need to check if they are null or not.
// We are using if else case to check if the value is null or not.
// We need to use bang operator "!" with the optional value
// To tell the compiler that we are sure that the value is not null.
// If this value is found null, you code will break.
if (widget.onPlayStateChanged != null) {
widget.onPlayStateChanged!(!widget.isPlaying!);
}
},
);
}