Положение текста над видео - Flutter-web - PullRequest
0 голосов
/ 26 января 2020

Я пытаюсь расположить текст поверх видео.

В данный момент видео занимает как можно больше места, сохраняя при этом исходное соотношение сторон. В идеале я хотел бы, чтобы это продолжалось, поскольку я хочу, чтобы видео изменял размер в соответствии с окном браузера.

Я предполагаю, что мне нужно получить динамическую высоту / ширину видео ..

Если кто-нибудь знает, как автоматически воспроизводить видео, это было бы здорово - я использую пакет video_player.

enter image description here

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();
  }
}

1 Ответ

1 голос
/ 26 января 2020

вы можете обернуть свои виджеты в виджет стека и использовать позиционирование для позиционирования текста

 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, которое создает поле, которое станет настолько большим, насколько позволяет его родитель. * Конструкторы коробок размером 1019 *

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...