How to use single Icon button to play and pause audio in flutter

Question

How I can use single IconButton to play and pause the audio in flutter, using audio play package. Also if Icon I click on single list item it should change only one icon not all list icons.

And if anyone can suggest best audio player package to play list with inline audio it will be helpful.

import 'dart:convert';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:gradient_app_bar/gradient_app_bar.dart';
import 'package:http/http.dart' as http;
import 'package:jummamubarak/Screens/HomeScreen.dart';
import 'package:jummamubarak/Screens/ViewTone.dart';

class TonesListScreen extends StatefulWidget {
  @override
  _TonesListScreenState createState() => _TonesListScreenState();
}

class _TonesListScreenState extends State<TonesListScreen> {
  final String data =
      "https://api.airtable.com/v0/appZeBnQJQ0OaVoPQ/Ringtones?maxRecords=100000&view=Tones";
  List toneTitle;
  List toneurl;
  ScrollController _controller = new ScrollController();

  @override
  void initState() {
    super.initState();
    this.getJsonData();
  }

  Future<String> getJsonData() async {
    var response = await http.get(
      Uri.encodeFull(data),
      headers: {
        HttpHeaders.contentTypeHeader: "application/json",
        HttpHeaders.authorizationHeader: "Bearer keyr05is7vPCWxmYM"
      },
      // headers: {"Accept": "application/json"},
    );

    print(response.body);

    setState(() {
      // ignore: non_constant_identifier_names
      var ConvertDataToJson = json.decode(response.body);
      toneTitle = ConvertDataToJson['records'];
    });

    setState(() {
      // ignore: non_constant_identifier_names
      var ConvertDataToJson = json.decode(response.body);
      toneurl = ConvertDataToJson['records'];
    });

    return "Success";
  }

  Widget _files() {
    if (toneTitle == null) {
      return SpinKitCircle(
        color: Color(0xff34495E),
        size: 50.0,
      );
    } else {
      return ListView.builder(
        physics: const AlwaysScrollableScrollPhysics(), // new
        controller: _controller,
        itemCount: toneTitle == null ? 0 : toneTitle.length,
        itemBuilder: (BuildContext context, int index) {
          return Padding(
            padding: const EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
            child: Card(
              child: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Flexible(
                      child: Text(
                        toneTitle.reversed.toList()[index]['fields']['Name'],
                        style: GoogleFonts.muli(
                          fontSize: 15.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                    RadiantGradientMask(
                      child: IconButton(
                        icon: Icon(
                          Icons.play_circle_filled,
                          color: Colors.white,
                          size: 40.0,
                        ),
                        onPressed: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => ViewTone(
                                toneTitle: toneTitle.reversed.toList()[index]
                                    ['fields']['Name'],
                                toneUrl: toneurl.reversed.toList()[index]
                                    ['fields']['Url'],
                              ),
                            ),
                          );
                        },
                      ),
                    )
                  ],
                ),
              ),
            ),
          );
        },
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: GradientAppBar(
        gradient: LinearGradient(
          colors: [
            Color(0xff14d5a3),
            Color(0xff039cc1),
          ],
        ),
        title: Text(
          'Islamic Tones',
          style: GoogleFonts.muli(
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      body: _files(),
    );
  }
}

``

Answer 1

An audio player plugin that you can use in Flutter is audioplayers plugin. Simply initialize AudioPlayer to use functions play(), pause(), resume(), and stop(). Determine when you're going to play the audio from start and when pause/resume will be called on your use case. You can initialize a Timer each when the audio is played. If Timer is still set to 0, play the audio from the beginning. Else, call play/resume.

AudioPlayer audioPlayer = AudioPlayer();

// Call to play audio from the beginning
_playStart() async {
  int result = await audioPlayer.play(url);
  if (result == 1) {
    // success
  }
}

// Call to pause and resume audio
_playPause(bool play) async {
  if(play){
    await audioPlayer.resume();
  } else {
    await audioPlayer.pause();
  }
}