我们如何在 Alertdialog Flutter 中播放视频答案

【问题标题】：How can we play video in Alert Dialogue Flutter我们如何在 Alertdialog Flutter 中播放视频
【发布时间】：2021-10-19 01:32:48
【问题描述】：

要在警报对话框中播放视频，我使用以下代码。但是视频没有播放。是否可以在警报对话框中播放视频？有没有人解决这个问题的，请分享给我。

Future<void> _initializeVideoPlayerFuture;

  VideoPlayerController _controller;

_controller = VideoPlayerController.network(
                                  video_base_url+videoUrl,
                                );

                                // Initialize the controller and store the Future for later use.
                                _initializeVideoPlayerFuture = _controller.initialize();

                                // Use the controller to loop the video.
                                _controller.setLooping(true);

                                // If the video is playing, pause it.
                                if (_controller.value.isPlaying) {
                                  _controller.pause();
                                } else {
                                  // If the video is paused, play it.
                                  _controller.play();
                                }
                                
                                
                                
                                
                                ContainerResponsive(
                                alignment: Alignment.center,
                                width: MediaQuery.of(context).size.width-50,
                                height: 150,
                                child: FutureBuilder(
                                  future: _initializeVideoPlayerFuture,
                                  builder: (context, snapshot) {
                                    if (snapshot.connectionState == ConnectionState.done) {
                                      // If the VideoPlayerController has finished initialization, use
                                      // the data it provides to limit the aspect ratio of the video.
                                      return AspectRatio(
                                        aspectRatio: _controller.value.aspectRatio,
                                        // Use the VideoPlayer widget to display the video.
                                        child: VideoPlayer(_controller),
                                      );
                                    } else {
                                      // If the VideoPlayerController is still initializing, show a
                                      // loading spinner.
                                      return const Center(
                                        child: CircularProgressIndicator(),
                                      );
                                    }
                                  },
                                )

                              ),

【问题讨论】：

这能回答你的问题吗？ Flutter how do i show a video in alertDialog
是的......但我使用它的方式相同。但是我的视频在第一帧就停止了。
您是否将自动播放设置为 true？
是的，我加了。
如果我在 InitState 中初始化播放器，它正在工作。但我的要求是当我单击 gridview 项目警报对话框时将打开。然后我会点击播放按钮。

标签： android flutter video video-player

【解决方案1】：

在这里为视频播放器、初始化的视频播放器控制器和视频播放器小部件创建一个像这样的新有状态小部件类

import 'package:approved/src/constants/colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:video_player/video_player.dart';

class VideoWidget extends StatefulWidget {
  final String? url;
  final bool? play;

  const VideoWidget({@required this.url, @required this.play});
  @override
  _VideoWidgetState createState() => _VideoWidgetState();
}

class _VideoWidgetState extends State<VideoWidget> {
  late VideoPlayerController _controller;
  Future<void>? _initializeVideoPlayerFuture;

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

    if (widget.play!) {
      _controller.play();
      _controller.setLooping(true);
    }
  }

  @override
  void didUpdateWidget(VideoWidget oldWidget) {
    if (oldWidget.play != widget.play) {
      if (widget.play!) {
        _controller.play();
        _controller.setLooping(true);
      } else {
        _controller.pause();
      }
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Container(
        color: Colors.white,
        child: FutureBuilder(
          future: _initializeVideoPlayerFuture,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              return VideoPlayer(_controller);
            } else {
              return const Center(
                child: CircularProgressIndicator(),
              );
            }
          },
        ),
      ),
      
    ]);
  }
}

现在您可以在任何需要传递视频 url 和播放参数 true/false 的地方使用这个 widget。

就像我在 showDialog 方法中使用的一样

playVideo(
    BuildContext context,
    
  ) {
    return showDialog(
        context: context,
        builder: (context) {
          return Center(
              child: SizedBox(
                  height: 300,
                  width: 300,
                  child: VideoWidget(url: url, play: true)));
        });
  }

【讨论】：