在 Flutter 中离开页面后停止播放音乐

Question

在我的 Flutter 应用中，我使用音频播放器：^0.17.0 来播放音乐。当我播放音乐并想离开页面时，我想停止播放音乐。为此，我正在使用 dispose()。看起来它正在工作。我遇到的问题是控制台中出现错误。我认为这是因为我使用的是异步，但我不知道如何修复它。或者，我可以为此目的使用不同的解决方案。有什么建议吗？

这是我的代码和错误：

class _MyAppState extends State<HomeApp> {
  var currentPageValue = 0;
  double currentPage = 0;
  PageController pageController = PageController(initialPage: 0);

  AudioPlayer audioPlayer = new AudioPlayer();

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

    pageController.addListener(() {
      if (pageController.page == pageController.page.roundToDouble()) {
        setState(() {
          currentPage = pageController.page;
        });
      }
    });
  }

  bool playing = false;

  @override
  Future<void> dispose() async {
    await audioPlayer.stop();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final itemsData = Provider.of<ItemsList>(context);

    _nextCardHandler() async {
      if (pageController.page.toInt() < itemsData.items.length - 1) {
        pageController.animateToPage(pageController.page.toInt() + 1,
            duration: Duration(milliseconds: 400), curve: Curves.easeIn);
      } else {
        pageController.animateToPage(0,
            duration: Duration(milliseconds: 400), curve: Curves.easeIn);
      }
      if (playing) {
        var res = await audioPlayer.stop();
        if (res == 1) {
          setState(() {
            playing = false;
          });
        }
      }
    }

    _prevCardHandler() async {
      if (pageController.page.toInt() == 0) {
        pageController.animateToPage(itemsData.items.length - 1,
            duration: Duration(milliseconds: 400), curve: Curves.easeIn);
      } else {
        pageController.animateToPage(pageController.page.toInt() - 1,
            duration: Duration(milliseconds: 400), curve: Curves.easeIn);
      }
      if (playing) {
        var res = await audioPlayer.stop();
        if (res == 1) {
          setState(() {
            playing = false;
          });
        }
        print('stop here');
      }
    }

    void _getAudio(audio) async {
      if (playing) {
        var res = await audioPlayer.pause();
        if (res == 1) {
          setState(() {
            playing = false;
          });
        }
        print('pause uuuu');
      } else {
        var res = await audioPlayer.play(audio, isLocal: true);
        await audioPlayer.setReleaseMode(ReleaseMode.LOOP);
        if (res == 1) {
          print('play 999');
          setState(() {
            playing = true;
          });
        }
      }
    }

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).primaryColor,
        title: Text(
          itemsData.items[currentPage.round()].title,
        ),
        iconTheme: IconThemeData(color: Theme.of(context).accentColor),
      ),
      drawer: AppDrawer(),
      body: PageView.builder(
        controller: pageController,
        itemCount: itemsData.items.length,
        itemBuilder: (ctx, int itemIndex) {
          return Container(
            decoration: new BoxDecoration(
              image: new DecorationImage(
                image: NetworkImage(itemsData.items[itemIndex].image),
                fit: BoxFit.cover,
              ),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Container(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      SizedBox(
                        child: IconButton(
                          icon: Icon(Icons.favorite_border),
                          color: Theme.of(context).accentColor,
                          iconSize: 40,
                          onPressed: () {},
                        ),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: EdgeInsets.all(20),
                  ),
                ),
                Container(
                  color: Colors.black54,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      SizedBox(
                        child: IconButton(
                          icon: Icon(Icons.arrow_left_sharp),
                          color: Theme.of(context).accentColor,
                          iconSize: 80,
                          onPressed: _prevCardHandler,
                        ),
                      ),
                      SizedBox(
                        child: IconButton(
                          icon: Icon(playing == false
                              ? Icons.play_circle_fill_outlined
                              : Icons.pause_circle_filled_outlined),
                          color: Theme.of(context).accentColor,
                          iconSize: 80,
                          onPressed: () =>
                              _getAudio(itemsData.items[itemIndex].audio),
                        ),
                      ),
                      SizedBox(
                        child: IconButton(
                          icon: Icon(Icons.arrow_right_sharp),
                          color: Theme.of(context).accentColor,
                          iconSize: 80,
                          onPressed: _nextCardHandler,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

enter image description here

Answer 1

据此link。

您可以先调用super.dispose() 后运行异步事件。所以在你的情况下

  @override
  Future<void> dispose() async {
    super.dispose(); //change here
    await audioPlayer.stop();
    
  }