如何將視頻放入列表視圖構建器？

Question

我想將視頻播放器添加到我的 Listview.builder(child:???).每個視頻都必須有不同的鏈接，我該怎么做？

列表視圖生成器

>  buildSectionTitle(context, 'Videos'),
        buildContainer(
          ListView.builder(
            itemBuilder: (ctx, index) => Container(
                  color: Theme.of(context).accentColor,
                  child: Padding(
                      padding: EdgeInsets.symmetric(
                        vertical: 5,
                        horizontal: 10,
                      ),
                      child: ???,
                ),

          ),
        ),

Answer 1

第一步：添加視頻播放器插件

第二步：創建一個包含 vieo 的新小部件（對於ListView每個元素

class VideoItem extends StatefulWidget {
final string url;

VideoItem(this.url);
    @override
      _VideoItemState createState() => VideoItem();
    }

class _VideoItemState extends State<VideoApp> {
  VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(widget.url)
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
          child: _controller.value.initialized
              ?Stack(childre:[ AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),),
Center(child;:GestureDetector(onTap:_playPause,
child:Icon(Icons.play_circle))

]
                    )
                  : Container(),
        ),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
_playPause(){
if(_controller.isPlaying){
_controller.pause();
}else{
_controller.play();
}
}

然后：在ListView使用它

ListView.builder(
itemCount: listOfVideoUrl.length, //Notice this
                itemBuilder: (ctx, index) => VideoItem(listOfVideoUrl[index]))

注意：這不是實現這一目標的最佳方式。 考慮在ListView使用圖像，然后在用戶點擊后打開播放器頁面