Flutter/Dart - 如何使用 onPressed 和 flutter_Swiper 包中的 flatButton 播放列表中的声音？

Question

G'day Stackoverflowers!

I have started learning Flutter/Dart for a personal project and I came across a problem I can't solve. I would really appreciate a bit of help, please.

I'm building an application to learn English (I'm an English teacher and author) and one of the pages of the app is where you can see pictures of different foods and drinks with their name written and the possibility to listen to the pronunciation of the food or drink. here is a snippet of the code so far:

Swiper(
        itemWidth: MediaQuery.of(context).size.width,
        itemHeight: MediaQuery.of(context).size.height,
        layout: SwiperLayout.TINDER,
        itemCount: 43,
        indicatorLayout: PageIndicatorLayout.WARM,
        itemBuilder: (BuildContext context, int index,) {
          return Card(
            elevation: 5.0,
            child: Column(
              children: <Widget>[
                FlatButton(
                  onPressed: () => {
                    foodSounds[index],
                  },
                  child: Row(
                    children: <Widget>[
                      SizedBox(
                        width: 70.0,
                      ),
                      Icon(Icons.volume_up),
                      SizedBox(
                        width: 30.0,
                      ),
                      Text(foodNouns[index],
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontSize: 20,
                            fontWeight: FontWeight.w500,
                          )),
                    ],
                  ),
                ),
                Image.asset(foodPictures[index], fit: BoxFit.contain),
              ],
            ),
          );

As you can probably guess, I have no problem displaying the pictures I want and their respective nouns using a list and the index of this list. Here are the lists I've got for the pictures and nouns

final List foodPictures = [
'images/foodnouns/apple.jpg',
'images/foodnouns/banana.jpg',
'images/foodnouns/bar.jpg',
'images/foodnouns/beer.jpg',
'images/foodnouns/biscuits.jpg',
'images/foodnouns/bread.jpg',
'images/foodnouns/breakfast.jpg',
'images/foodnouns/butter.jpg',
'images/foodnouns/cafe.jpg',
'images/foodnouns/cake.jpg',
'images/foodnouns/cheese.jpg',
'images/foodnouns/chocolate.jpg',
'images/foodnouns/coffee.jpg',
'images/foodnouns/cup.jpg',
'images/foodnouns/cup_of_coffee.jpg',
'images/foodnouns/dinner.jpg',
'images/foodnouns/egg.jpg',
'images/foodnouns/fish.jpg',
'images/foodnouns/food.jpg',
'images/foodnouns/fries.jpg',
'images/foodnouns/fruits.jpg',
'images/foodnouns/glass.jpg',
'images/foodnouns/ice_cream.jpg',
'images/foodnouns/juice.jpg',
'images/foodnouns/knife.jpg',
'images/foodnouns/lunch.jpg',
'images/foodnouns/meal.jpg',
'images/foodnouns/meat.jpg',
'images/foodnouns/milk.jpg',
'images/foodnouns/orange.jpg',
'images/foodnouns/picnic.jpg',
'images/foodnouns/pizza.jpg',
'images/foodnouns/plate.jpg',
'images/foodnouns/potatoes.jpg',
'images/foodnouns/rice.jpg',
'images/foodnouns/salt.jpg',
'images/foodnouns/sandwich.jpg',
'images/foodnouns/soup.jpg',
'images/foodnouns/sugar.jpg',
'images/foodnouns/tea.jpg',
'images/foodnouns/tomato.jpg',
'images/foodnouns/vegetables.jpg',
'images/foodnouns/wine.jpg',];

final List foodNouns =[
'apple',
'banana',
'bar',
'beer',
'biscuits',
'bread',
'breakfast',
'butter',
'cafe',
'cake',
'cheese',
'chocolate',
'coffee',
'cup',
'cup_of_coffee',
'dinner',
'egg',
'fish',
'food',
'fries',
'fruits',
'glass',
'ice_cream',
'juice',
'knife',
'lunch',
'meal',
'meat',
'milk',
'orange',
'picnic',
'pizza',
'plate',
'potatoes',
'rice',
'salt',
'sandwich',
'soup',
'sugar',
'tea',
'tomato',
'vegetables',
'wine',];

This is how it looks like so far:

overview of the page

Now I would like to be able to play a sound for each card. I have the sounds in my assets in the following directory : assets: -assets/foodsounds/ I want to be able to play the sound from a list of my sounds. here is the list :

    final List foodSounds=[
  'assets/foodsounds/apple.mp3',
  'assets/foodsounds/banana.mp3',
  'assets/foodsounds/bar.mp3',
  'assets/foodsounds/beer.mp3',
  'assets/foodsounds/biscuits.mp3',
  'assets/foodsounds/bread.mp3',
  'assets/foodsounds/breakfast.mp3',
  'assets/foodsounds/butter.mp3',
  'assets/foodsounds/café.mp3',
  'assets/foodsounds/cake.mp3',
  'assets/foodsounds/cheese.mp3',
  'assets/foodsounds/chocolate.mp3',
  'assets/foodsounds/coffee.mp3',
  'assets/foodsounds/cup.mp3',
  'assets/foodsounds/cup_of_coffee.mp3',
  'assets/foodsounds/dinner.mp3',
  'assets/foodsounds/egg.mp3',
  'assets/foodsounds/fish.mp3',
  'assets/foodsounds/food.mp3',
  'assets/foodsounds/fries.mp3',
  'assets/foodsounds/fruits.mp3',
  'assets/foodsounds/glass.mp3',
  'assets/foodsounds/ice_cream.mp3',
  'assets/foodsounds/juice.mp3',
  'assets/foodsounds/knife.mp3',
  'assets/foodsounds/lunch.mp3',
  'assets/foodsounds/meal.mp3',
  'assets/foodsounds/meat.mp3',
  'assets/foodsounds/milk.mp3',
  'assets/foodsounds/orange.mp3',
  'assets/foodsounds/picnic.mp3',
  'assets/foodsounds/pizza.mp3',
  'assets/foodsounds/plate.mp3',
  'assets/foodsounds/potatoes.mp3',
  'assets/foodsounds/rice.mp3',
  'assets/foodsounds/salt.mp3',
  'assets/foodsounds/sandwich.mp3',
  'assets/foodsounds/soup.mp3',
  'assets/foodsounds/sugar.mp3',
  'assets/foodsounds/tea.mp3',
  'assets/foodsounds/tomato.mp3',
  'assets/foodsounds/vegetables.mp3',
  'assets/foodsounds/wine.mp3',];

I thought about using the audioplayers-0.14.0 package like so :

    void playFoodSound(int foodSounds) {
    final player = AudioCache(prefix: 'foodsounds/');
    player.play('$foodSounds.mp3');
  }

and use it in Swiper like the following:

FlatButton(
              onPressed: () => {
                foodSounds[index],
              },

This method doesn't work. I have tried a few others and I really can't figure out how to play those sounds...

I thank you all very much in advance for your help because I really don't want to have to hardcode those sounds.

Answer 1

Turns out I finally found my answer.

I used the assets_audio_player 1.2.3 package. Declared the following vaiable:

final AssetsAudioPlayer playFoodSound= AssetsAudioPlayer();

and used the following statement in my code :

FlatButton(onPressed: () =>{
                playFoodSound.open(foodSounds[index],),
          },

And it works like a charm.