How to stop Asset Audio Player(assets_audio_player package) ,while navigate to next page

Issue

In my code I use Asset Audio player package to play background music. But after I navigate to next page it Still Continue playing the Music. How should I stop this while navigate to next page?

------------------Here is My code----------------

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:toffeeride_flutterapp/screens/content_screen/content_screen.dart';
import 'package:assets_audio_player/assets_audio_player.dart';
class HomeScreen extends StatefulWidget {
  static const routeName = "/home_screen";

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  AssetsAudioPlayer? _assetsAudioPlayer;
  @override
  void initState() {
    super.initState();
   

    _assetsAudioPlayer = AssetsAudioPlayer();
    AssetsAudioPlayer.newPlayer().open(
      Audio("assets/audio/bgm.mp3"),
      autoStart: true,
      showNotification: true,
    );
    _assetsAudioPlayer!.play();
  }

  @override
  void deactivate() {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeRight,
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);

    super.deactivate();
  }
  @override
  void dispose() { 
     _assetsAudioPlayer = null;
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
     SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeRight,
      DeviceOrientation.landscapeLeft,
    ]);
    return Scaffold(
      body: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          decoration: BoxDecoration(
              image: DecorationImage(
            image: AssetImage('assets/images/home/Sky.png'),
            fit: BoxFit.cover,
          )),
          child: Stack(
            children: [
              Positioned(
                left: 300,
                child: Image(
                    height: MediaQuery.of(context).size.height / 5,
                    image: AssetImage('assets/images/logo/HomeScreenLogo.png')),
              ),
              Positioned(
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  child: Image(
                    image: AssetImage('assets/images/home/Hill.png'),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              Positioned(
                top: 10,
                right: 3,
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height,
                  child: Image(
                    image: AssetImage('assets/images/home/elements.png'),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              Positioned(
                top: 20,
                left: 20,
                child: GestureDetector(
                  onTap: () {
                   Navigator.pushReplacement(
                        context,
                        MaterialPageRoute(builder: (context) => ContentScreen()),
                      );
                  },
                  child: Image(
                      height: 70,
                      image: AssetImage(
                          'assets/images/icons/newicons/Menu_150.png')),
                ),
              ),
              Positioned(
                child: Align(
                  alignment: Alignment.centerRight,
                  child: GestureDetector(
                    onTap: () {
                      // Navigator.pushReplacement(
                      //   context,
                      //   MaterialPageRoute(builder: (context) => ModuleListScreen()),
                      // );
                    },
                    child: Image(
                      height: 100,
                      image: AssetImage(
                          'assets/images/icons/newicons/Play_150.png'),
                    ),
                  ),
                ),
              ),
            ],
          )),
    );
  }
}

In my code I use Asset Audio player to play background music. But after I navigate to next page it Still Continue playing the Music. How should I stop this while navigate to next page?

------------------Here is My code----------------

Solution

First you should change your initState like this:

  @override
  void initState() {
super.initState();

_assetsAudioPlayer = 
AssetsAudioPlayer.newPlayer();
_assetsAudioPlayer!.open(
  Audio("assets/audio/bgm.mp3"),
  autoStart: false,
  showNotification: true,
);
_assetsAudioPlayer!.play();
  }

Then add this before your navigation code:

_assetsAudioPlayer!.stop();

Answered By - Mehrzad Mohammadi