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

05. Implement the Play Button

Episode complete

Play next episode

Next
About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 04. Setup the Audio Widget Next 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: 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've reached locked video content where the transcript will be shown as obfuscated text.

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!);
      }
    },
  );
}