Get immediate access to this and 4,000+ other videos and books.

Take your career further with a raywenderlich.com Pro subscription. 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.

Implement the Play Button Pro

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.

Add the parameters for the audio widget and code up the logic for the play interaction.

Contributors

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

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

Reviews

Comments