在视频上放置文本 - Flutter-web答案

【问题标题】：Position Text over Video - Flutter-web在视频上放置文本 - Flutter-web
【发布时间】：2020-05-12 04:58:03
【问题描述】：

我正在尝试在视频上放置一些文字。

视频目前正在占用尽可能多的空间，同时保持其原始纵横比。理想情况下，我希望它继续这样做，因为我希望视频调整大小以适应浏览器窗口。

我假设我需要动态获取视频的高度/宽度..

如果有人知道如何自动播放视频，那就太好了 - 我正在使用 video_player 包。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      drawer: ResponsiveLayout.isSmallScreen(context) ? NavDrawer() : null,
      body: Container(
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              NavBar(),
              Body(),
              Footer(),
            ],
          ),
        ),
      ),
    );
  }
}

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ResponsiveLayout(
      largeScreen: LargeScreen(),
      mediumScreen: LargeScreen(),
      smallScreen: LargeScreen(),
    );
  }
}

class LargeScreen extends StatefulWidget {
  @override
  _LargeScreenState createState() => _LargeScreenState();
}

class _LargeScreenState extends State<LargeScreen> {
  VideoPlayerController _videoPlayerController;
  Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    _videoPlayerController = VideoPlayerController.asset(
      'assets/videos/video.mp4',
    );
    _initializeVideoPlayerFuture = _videoPlayerController.initialize();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 40),
      child: Column(
        children: <Widget>[
          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 VideoPlayer.
                return AspectRatio(
                  aspectRatio: _videoPlayerController.value.aspectRatio,
                  // Use the VideoPlayer widget to display the video.
                  child: VideoPlayer(_videoPlayerController),
                );
              } else {
                // If the VideoPlayerController is still initializing, show a
                // loading spinner.
                return Center(child: CircularProgressIndicator());
              }
            },
          ),
        ],
      ),
    );
  }

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

【问题讨论】：

我更新了我的答案以回答所有三个问题希望它有所帮助

标签： flutter dart flutter-layout flutter-web

【解决方案1】：

您可以将小部件包装在堆栈小部件中并使用定位来定位您的文本

 AspectRatio(
                  aspectRatio: _videoPlayerController.value.aspectRatio,
                  // Use the VideoPlayer widget to display the video.
                  child: Stack(children:<Widget>[
                  VideoPlayer(_videoPlayerController),
                   Positioned(bottom:10,left:10,
               child:Text("my text here))
               ])
            )

更新

如果有人知道如何自动播放视频，那就太好了 - 我正在使用 video_player 包。您可以使用控制器设置视频的状态

_videoPlayerController.value.isPlaying

我希望调整视频大小以适应浏览器窗口。

您可以将视频包装在 SizedBox.expand 中，这会创建一个与其父级允许的一样大的框。 sized box constructors

【讨论】：