Flutter Swiper（VIDEOS）

Question

我一直在使用flutter_swiper包来实现轮播效果以查看多个图像，并且工作正常。

现在，我已经计划实施轮播效果来观看多个视频。

我一直在使用chewie观看单个视频，并且也可以正常工作。

然后，我尝试将两者结合起来，但效果不尽如人意。

首先，您可以观看Swiper中的所有视频。但是当您继续来回滑动时，会出现错误，提示

“ FlutterError（在处置后使用了VideoPlayerController。在VideoPlayerController上调用dispose（）后，将无法再使用它。）“

我真的需要你的帮助。

这是我的Chewie：

class ChewieFeedItem extends StatefulWidget {
  // This will contain the URL/asset path which we want to play
  final VideoPlayerController videoPlayerController;
  final bool looping;

  ChewieFeedItem({
    @required this.videoPlayerController,
    this.looping,
    Key key,
  }) : super(key: key);

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

class _ChewieFeedItemState extends State<ChewieFeedItem> {
  ChewieController _chewieController;
  bool isPlaying = false;
  @override
  void initState() {
    super.initState();
    // Wrapper on top of the videoPlayerController
    _chewieController = ChewieController(
      videoPlayerController: widget.videoPlayerController,
      aspectRatio: widget.videoPlayerController.value.aspectRatio,
      // Prepare the video to be played and display the first frame
      autoInitialize: true,
      looping: widget.looping,
      showControls: false,
      autoPlay: false,
      // Errors can occur for example when trying to play a video
      // from a non-existent URL
      errorBuilder: (context, errorMessage) {
        return Center(
          child: Text(
            errorMessage,
            style: TextStyle(color: Colors.white),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      child: Stack(
        children: <Widget>[
          Chewie(
            controller: _chewieController,
          ),
          Container(
            alignment: Alignment.center,
            child: GestureDetector(
              onTap: () {
                if (isPlaying) {
                  _chewieController.pause();
                  setState(() {
                    isPlaying = false;
                  });
                } else {
                  _chewieController.play();
                  setState(() {
                    isPlaying = true;
                  });
                }
              },
              child: Icon(
                isPlaying ? FontAwesomeIcons.pause : FontAwesomeIcons.play,
                size: 80,
                color: Color(colorProxiWall).withOpacity(0.3),
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    // IMPORTANT to dispose of all the used resources
    widget.videoPlayerController.dispose();
    _chewieController.dispose();
  }
}

这是我想出的：

Swiper(
                                itemBuilder: (BuildContext context, int i) {
                                  return Container(
                                      padding:
                                          EdgeInsets.only(right: 5, left: 5),
                                      child: ClipRRect(
                                          borderRadius:
                                              new BorderRadius.circular(0),
                                          child: getImageType(
                                                      content[i].content) ==
                                                  "image"
                                              ? CachedNetworkImage(
                                                  imageUrl:
                                                      "${APIServices.httpDomain}${content[i].content}",
                                                  placeholder: (context, url) =>
                                                      Image.asset(
                                                          'assets/app/app_icon.png'),
                                                  errorWidget:
                                                      (context, url, error) =>
                                                          new Icon(Icons.error),
                                                  fit: BoxFit.cover,
                                                )
                                              : ChewieFeedItem(
                                                  videoPlayerController:
                                                      VideoPlayerController
                                                          .network(
                                                    "${APIServices.httpDomain}${content[i].content}",
                                                  ),
                                                  looping: true,
                                                )));
                                },
                                itemCount: content.length,
                                pagination: new SwiperPagination(
                                    builder: DotSwiperPaginationBuilder(
                                        color: Colors.white.withOpacity(0.75),
                                        activeColor:
                                            Theme.of(context).primaryColor)),
                                loop: false,
                                duration: 100,
                              )

我正在将内容传递给getImageType以检查内容是Image还是Video。

Answer 1

我的脚本为我工作

Scaffold _scaffold(ProductDetailApi data, Size size){
videoPlayerController = VideoPlayerController.network(data.gallery[1].url);
chewieController = ChewieController(
  videoPlayerController: videoPlayerController,
  aspectRatio: 3 / 2,
  autoPlay: true,
  looping: true,
);
return Scaffold(
  resizeToAvoidBottomPadding: false,
  appBar: AppBar(
    title: Text(data.products[0].productname),
    backgroundColor: Colors.lightBlue,
  ),
  body: Column(children: <Widget>[
    //buildImage(data, size),
    //buildVideo(chewieController, size),
    //_swiper(data, size),
    Container(
              // A fixed-height child.
              height: 150.0,
              child: _swiper(data, size),
            ),
    buildSubmitBid(),
    buildDescription(data),
    SizedBox(height: 10,),
    buildChoice(data),
    buildLastBidTitle(),
    Expanded(
      flex: 2,
      child: buildLastBid(data),
    ),
    SizedBox(height: 10,),
    Container(
      margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
      child: 
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(data.products[0].description,
                  style: TextStyle(
                    fontSize: 15
                  ),
              )
            ]
          )
      )
  ],)
);

}

Swiper _swiper(data, size) {
return Swiper(
  outer: false,
  itemBuilder: (context, i) {
    return Container(
        child: Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(15.0),
            ),
            elevation: 10,
            child: 
              (data.gallery[i].typefile=="IMAGE")?
              CachedNetworkImage(
                placeholder: (context, url) => CircularProgressIndicator(),
                imageUrl: data.gallery[i].url,
                fit: BoxFit.fitHeight,
              ):
              Chewie(
                  controller: chewieController,
                  )
            )
          );
  },
  autoplay: true,
  duration: 300,
  pagination: new SwiperPagination(margin: new EdgeInsets.all(5.0)),
  itemCount: data.gallery.length,
);

}