首页 > 解决方案 > 如何使用 Swiper(Slider) 映射或索引到图像和音频?

问题描述

如何在颤动中映射或索引图像和音频

我正在尝试制作滑块应用程序如果滑块打开播放音频

我存储了 26 个图像和 26 个音频

如果第一张幻灯片打开播放第一个音频和第二个图像第二个音频

我正在使用 Swiper flutter_swiper: ^1.1.4 滑动滑块设置为自动播放

我正在使用音频播放器 assets_audio_player: ^2.0.10

我正在尝试制作完整的离线应用程序,所以我使用 assets_audio_player: ^2.0.10

import 'package:flutter/material.dart';
 import 'package:flutter_swiper/flutter_swiper.dart';
 import 'package:assets_audio_player/assets_audio_player.dart';

 // ignore: must_be_immutable
 class Country extends StatelessWidget {
 Country({Key key}) : super(key: key);

List images = [
 'images/Country/a.jpg',
 'images/Country/b.jpg',
 'images/Country/c.jpg',
 'images/Country/d.jpg',
 'images/Country/e.jpg',
 'images/Country/f.jpg',
 'images/Country/g.jpg',
 'images/Country/h.jpg',
 'images/Country/i.jpg',
 'images/Country/j.jpg',
 'images/Country/k.jpg',
 'images/Country/l.jpg',
 'images/Country/m.jpg',
 'images/Country/n.jpg',
 'images/Country/o.jpg',
 'images/Country/p.jpg',
 'images/Country/q.jpg',
 'images/Country/r.jpg',
 'images/Country/s.jpg',
 'images/Country/t.jpg',
 'images/Country/u.jpg',
 'images/Country/v.jpg',
 'images/Country/w.jpg',
 'images/Country/x.jpg',
 'images/Country/y.jpg',
 'images/Country/z.jpg',
];
   List<T> map<T>(
 List list,
 Function handler,
) {
 List<T> result = [];
 for (var i = 0; i < list.length; i++) {
   result.add(handler(i, list[i]));
 }
 return result;
}

 @override
 Widget build(BuildContext context) {
 return Scaffold(
   appBar: AppBar(
     title: Text("Swipper"),
   ),
   body: Center(
     child: Container(
         height: 500.0,
         width: 370.0,
         child: new Swiper(
           itemHeight: 400.0,
           itemBuilder: (BuildContext context, int index) {
             return new Image.asset(
               images[index],
               fit: BoxFit.fill,
             );
           },
           autoplay: true,
           itemCount: images.length,
           autoplayDelay: 5000,
           control: new SwiperControl(color: Colors.redAccent),
           onIndexChanged: (index) {
             onPlayAudio();
           },
         )),
   ),
   bottomNavigationBar: BottomNavigationBar(
     items: [
       BottomNavigationBarItem(
         // ignore: deprecated_member_use
         title: Text("kumar"),
         icon: Icon(Icons.home),
       ),
       BottomNavigationBarItem(
           // ignore: deprecated_member_use
           title: Text("kumar"),
           icon: Icon(Icons.backpack_sharp)),
     ],
     onTap: (int index) {
       Navigator.pop(
         context,
       );
     },
   ),
 );
 }
}

  void onPlayAudio() async {
  AssetsAudioPlayer assetsAudioPlayer = AssetsAudioPlayer();
  assetsAudioPlayer.open(
   Playlist(
     audios: [
       Audio("images/alpha/a.mp3"),
       Audio("images/alpha/b.mp3"),
       Audio("images/alpha/c.mp3"),
       Audio("images/alpha/d.mp3"),
       Audio("images/alpha/e.mp3"),
       Audio("images/alpha/f.mp3"),
       Audio("images/alpha/g.mp3"),
       Audio("images/alpha/h.mp3"),
       Audio("images/alpha/i.mp3"),
       Audio("images/alpha/j.mp3"),
       Audio("images/alpha/k.mp3"),
       Audio("images/alpha/l.mp3"),
       Audio("images/alpha/m.mp3"),
       Audio("images/alpha/n.mp3"),
       Audio("images/alpha/o.mp3"),
       Audio("images/alpha/p.mp3"),
       Audio("images/alpha/q.mp3"),
       Audio("images/alpha/r.mp3"),
       Audio("images/alpha/s.mp3"),
       Audio("images/alpha/t.mp3"),
       Audio("images/alpha/u.mp3"),
       Audio("images/alpha/v.mp3"),
       Audio("images/alpha/w.mp3"),
       Audio("images/alpha/x.mp3"),
       Audio("images/alpha/y.mp3"),
       Audio("images/alpha/z.mp3"),
     ],
   ),
   autoStart: true,
   playInBackground: PlayInBackground.disabledPause,
   loopMode: LoopMode.playlist //loop the full playlist
   );

   assetsAudioPlayer.next();
   assetsAudioPlayer.previous();
   assetsAudioPlayer.playlistPlayAtIndex(0);
   assetsAudioPlayer.stop();
   assetsAudioPlayer.playOrPause();
   assetsAudioPlayer.play();
   assetsAudioPlayer.pause();
   }

标签: flutteraudioflutter-dependenciesflutter-slider

解决方案


推荐阅读