Как проигрывать аудио на каждой странице флеш-карты во флаттере

Question

Я делаю приложение для карточек с флаттером, которое будет отображать перевод с немецкого на английский. Я хочу добавить звук немецкого предложения на каждую страницу, которую пользователь может слушать, нажав кнопку. Будет около 600 слов / карточек. Как этого можно достичь. Любезно поддержите, так как это мое первое приложение.

мой файл CSV:

Немецкое слово, немецкое предложение, английское слово, английское предложение

die Ansage,Hören Sie auf die Ansagen, объявление, Слушайте объявления

Ниже мой код:

      
import 'package:csv/csv.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:transformer_page_view/transformer_page_view.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter-Flashcard',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'German Vocabulary'),
    );
  }
}


class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {

 return FutureBuilder<String>(
        future: rootBundle.loadString('lib/assets/questions.csv'), //
        builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
          List<List<dynamic>> csvTable =
          CsvToListConverter().convert(snapshot.data);
          print(csvTable);
          return Scaffold(
            appBar: AppBar(
              title: Text(widget.title),
            ),
            body: new TransformerPageView(
                loop: true,
                viewportFraction: 0.8,
                transformer: new PageTransformerBuilder(
                    builder: (Widget child, TransformInfo info) {
                      return new Padding(
                        padding: new EdgeInsets.all(10.0),
                        child: new Material(
                          elevation: 8.0,
                          textStyle: new TextStyle(color: Colors.white),
                          borderRadius: new BorderRadius.circular(10.0),
                          child: new Stack(
                            fit: StackFit.expand,
                            children: <Widget>[

                              new Positioned(
                                child: new Column(
                                  mainAxisSize: MainAxisSize.min,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    new Container(
                                         child: new Text(
                                        csvTable[info.index + 1][0],
                                          style: new TextStyle(
                                          fontSize: 24.0,
                                          color: Colors.black,
                                             ),
                                      ),

                                     alignment: Alignment.center,
                                ),
                                      new Container(
                                      child: new Text(
                                        csvTable[info.index + 1][1],
                                        style: new TextStyle(
                                          fontSize: 24.0,
                                          color: Colors.black,
                                          height: 2
                                        ),
                                      ),
                                     
                                      alignment: Alignment.center,
                                    ),  
                                  ],
                                ),
                                left: 10.0,
                                right: 10.0,
                                top: 100.0,
                              )
                            ],
                          ),
                        ),
                      );
                    }),
                itemCount: csvTable.length - 1),
          );
        });
  }
}

Answer 1

Используйте нижеприведенный код:

назовите свои mp3 файлы как s0s1s2

      
itemBuilder: (BuildContext context, int index) {

new Container(

                                    child: TextButton.icon(
                                        icon: Icon(Icons.volume_up),
                                        label: Text('Listen'),
                                        onPressed: () => audioCache.play('s$index.mp3'))
                                ),
}