使用Flutter开发一款电视广告机

346 阅读1分钟

实现功能

  1. 支持 图片,h5和视频轮播
  2. 图片和H5支持自定义轮播时长
  3. 基础框架使用了Get+retrofit+betterplayer

效果预览:

Screen_Recording_20230725_161134.gif

部分代码参考 图片轮播定时

var period = const Duration(seconds: 1);  
Timer? timer;
startTimer() {  
duration = task.duration;  
timer = Timer.periodic(period, (timer) {  
duration--;  
if (duration == 0) {  
timer.cancel();  
Get.find<MainPageController>().toNext();  
}  
});  
}

视频播放器部分

key: Key(widget.task.link),  
child: AspectRatio(  
aspectRatio: 16 / 9,  
child: BetterPlayer(  
controller: controller.betterPlayerController,  
),  
),  
onVisibilityChanged: (visibilityInfo) {  
var visiblePercentage = visibilityInfo.visibleFraction * 100;  
if (visiblePercentage == 100) {  
controller.play();  
} else {  
controller.stop();  
}  
});
switch (event.betterPlayerEventType) {  
case BetterPlayerEventType.progress:  
break;  
case BetterPlayerEventType.finished:  
Get.find<MainPageController>().toNext();  
break;  
case BetterPlayerEventType.exception:  
//todo 因为这个exception可能会执行多次 所以需要做一特殊处理
Get.find<MainPageController>().toNext();  
betterPlayerController.pause();  
break;  
}  
});

github地址 有问题请联系我