Flutter - Audio is playing only once when I go to PianoMain page

Question

I am making a piano app as a beginner for demo. I have made the whole page for Piano including UI and audio functionality. But, the problem is that when I open PianoMain so, it plays any one of key's audio. Then if I press any key's onTap it doesn't work. So, let me put my code here. And, please check if you can find any mistake of mine.

AudioPlayer player = AudioPlayer();

  void playAudio({required String fileName}) {
    player.play(AssetSource(fileName));
  }

Package is: import 'package:audioplayers/audioplayers.dart';

@override
  void dispose() async {
    super.dispose();
    await player.stop();
  }

Row(
            children: [
              PianoButtonSuperKey(
                keyPress: () {
                  playAudio(fileName: "piano/piano3.mp3");
                },
              ),
              PianoButton(
                onSuperKeyPress: () {
                  playAudio(fileName: "piano/blackpiano1.mp3");
                },
                onMainKeyPress: () {
                  playAudio(fileName: "piano/piano4.mp3");
                },
              ),
              PianoButtonSuperKey(
                keyPress: () {
                  playAudio(fileName: "piano/piano5.mp3");
                },
              ),
              PianoButton(
                onSuperKeyPress: () {
                  playAudio(fileName: "piano/hard7.mp3");
                },
                onMainKeyPress: () {
                  playAudio(fileName: "piano/piano10.mp3");
                },
              ),
              PianoButton(
                onSuperKeyPress: () {
                  playAudio(fileName: "piano/hardpiano8.mp3");
                },
                onMainKeyPress: () {
                  playAudio(fileName: "piano/audio6.mp3");
                },
              ),
            ],
          ),

class PianoButton extends StatelessWidget {
  const PianoButton(
      {super.key, required this.onMainKeyPress, required this.onSuperKeyPress});
  final Function onMainKeyPress;
  final Function onSuperKeyPress;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 1,
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          Container(
            height: double.infinity,
            width: double.infinity,
            padding: const EdgeInsets.only(right: 8, bottom: 2, top: 2),
            child: GestureDetector(
              onTap: onMainKeyPress(),
              child: Container(
                decoration: const BoxDecoration(
                    color: Colors.white, boxShadow: [BoxShadow(blurRadius: 2)]),
              ),
            ),
          ),
          Positioned(
              top: 2,
              right: 98,
              child: SizedBox(
                width: 50,
                height: 200,
                child: GestureDetector(
                  onTap: onSuperKeyPress(),
                  child: Container(
                    decoration: const BoxDecoration(color: Colors.black),
                  ),
                ),
        ],
      ),
    );
  }
}

class PianoButtonSuperKey extends StatelessWidget {
  const PianoButtonSuperKey({super.key, required this.keyPress});
  final Function keyPress;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 1,
      child: Container(
        height: double.infinity,
        width: double.infinity,
        padding: const EdgeInsets.only(right: 8, bottom: 2, top: 2),
        child: GestureDetector(
          onTap: keyPress(),
          child: Container(
            decoration: const BoxDecoration(
                color: Colors.white, boxShadow: [BoxShadow(blurRadius: 2)]),
          ),
        ),
      ),
    );
  }
}

I hope I could clear.

score 0 · Accepted Answer · answered Apr 11 '23 at 05:11

It looks like you are calling the functions onMainKeyPress and onSuperKeyPress with () in your GestureDetector's onTap method. This is causing the functions to be executed immediately when the widget is built instead of when the widget is tapped.

To fix this, you can remove the () when calling the functions in your GestureDetector's onTap method. For example, change onTap: onMainKeyPress() to onTap: onMainKeyPress. Similarly, change onTap: onSuperKeyPress() to onTap: onSuperKeyPress.

Actually, this worked after I made `Function` to `VoidCallback`. Thank You.. — pnpatel, Apr 11 '23 at 05:23

Flutter - Audio is playing only once when I go to PianoMain page

1 Answers1