Creating Custom Reusable Widgets in Flutter, Episode 5: Implement the Play Button | Kodeco, the new raywenderlich.com

🎓 Courses & Articles
1

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

This is a companion discussion topic for the original entry at https://www.kodeco.com/35629188-creating-custom-reusable-widgets-in-flutter/lessons/5
2

Can you please update this course to be aware of null safety. I am unable to follow once you add the variables to the Audio Widget. In the course you do not reference which variables can be null, but the correct code is found in the final package:

  final bool? isPlaying;
  final ValueChanged<bool>? onPlayStateChanged;
  final Duration? currentTime;
  final ValueChanged<Duration>? onSeekBarMoved;
  final Duration totalTime;

When attempting to re-assign the value of the play icon*, the following error is occuring from the widget.isPlaying “A nullable expression can’t be used as a condition. Try checking that the value isn’t ‘null’ before using it as a condition”

I am currently operating on Flutter 3.3.10. I have enjoyed the course so far and would appreciate feedback/updates.

my AudioWidget File:

import 'package:flutter/material.dart';

class AudioWidget extends StatefulWidget {
  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);

  @override
  State<AudioWidget> createState() => _AudioWidgetState();
}

class _AudioWidgetState extends State<AudioWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 60,
      color: Colors.grey[300],
      child: Row(
        children: [
          _buildPlayPauseButton(),
          const Text('00:37'),
          Expanded(
            child: Slider(
              value: 0.5,
              activeColor: Theme.of(context).textTheme.bodyText2!.color,
              inactiveColor: Theme.of(context).disabledColor,
              onChanged: (double value) {},
            ),
          ),
          const Text('01:15'),
          const SizedBox(width: 16),
        ],
      ),
    );
  }

  IconButton _buildPlayPauseButton() => IconButton(
        icon: (widget.isPlaying) // *error is occurring here
            ? const Icon(Icons.play_arrow)
            : const Icon(Icons.pause),
        onPressed: () {
          if (widget.onPlayStateChanged != null) {
            widget.onPlayStateChanged!(!widget.isPlaying);
          }
        },
      );
}
3

Hello, I do understand the problem you are facing. As you will see the course is updated to the latest version of flutter and follows the awareness of null safety. Below the video, we have a note which explains what exactly the problem is and how you can solve it.

Final variables should be initialized when declared before use. When declaring variables without initialisation, they can be 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 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.

Before solving the error let us first start by understanding the error.
The compiler throws an error saying “A nullable expression can’t be used as a condition. Try checking that the value isn’t ‘null’ before using it as a condition” . This means we cannot use a nullable variable as a condition and must check that the value is not null before using it.

If you read the last line in the note which is given above it says

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.

Now we have to tell the compiler that we are sure the value of isPlaying is not null and that is done by adding a “!” bang operator. So to solve the issue just add a bang operator after widget.isPlaying
and the issue will be solved.


  IconButton _buildPlayPauseButton() => IconButton(

        icon: (widget.isPlaying!) // *error is occurring here -> Add "!" bang operator at the end of widget.isPlaying! 

            ? const Icon(Icons.play_arrow)

            : const Icon(Icons.pause),

        onPressed: () {

          if (widget.onPlayStateChanged != null) {

            widget.onPlayStateChanged!(!widget.isPlaying);

          }

        },

      );

}

I hope I was able to explain the issue and solve it as well. If you have any questions or doubts do let me know, and I will be happy to help.

Thank You, Keep Fluttering.

1 Like