颤动的垂直滚动视图中的视频

时间:2019-09-23 21:26:04

标签: video flutter flutter-layout vertical-scrolling flutter-sliver

我一直试图在列表视图内的垂直滚动视图中放置多个视频.....在卡片中.....我想在能够垂直滚动的视图中查看多个视频。 如下图所示。 我创建了一个带有灵活应用栏的 sliver ,然后将视频添加到了您所看到的背景中,现在我想对其中的带有卡片的垂直滚动视图进行相同的操作,但颇具挑战性,我尝试了“扩展”选项而不是“尺寸”框,但仍然无法生成视频。...我的代码,如您所见,我将另一页的一个视频作为'VideoPlayerApp ,另外我想使用视频控制器,谢谢。 '

import 'package:flutter/material.dart';
import 'package:flutter/semantics.dart';
import 'package:restored/home/home/myflexiableappbar.dart';
import 'package:restored/home/home/myappbar.dart';
import 'package:restored/Videos/butterfly.dart';
import 'package:video_player/video_player.dart';

class MainForm extends StatefulWidget {
  @override
  _MainFormState createState() => _MainFormState();
}

class _MainFormState extends State<MainForm> {
  VideoPlayerController _controller;

  Future<void> _initializeVideoPlayerFuture;
  @override
  void initState() {
    _controller = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
    );

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

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

  @override
  void dispose() {
    // Ensure disposing of the VideoPlayerController to free up resources.
    _controller.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: MyAppBar(),
            pinned: true,
            expandedHeight: 210,
            flexibleSpace: FlexibleSpaceBar(
              background: VideoPlayerApp(),
            ),
          ),
          SliverList(
            delegate: SliverChildListDelegate(<Widget>[
              Container(
                margin: EdgeInsets.symmetric(vertical: 20.0),
                height: 300,
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  children: <Widget>[
                    Container(
                      width: 300.0,
                      child: Card(
                        child: Wrap(
                          children: <Widget>[
                            VideoPlayer(_controller),
                          ],
                        ),
                      ),
                    ),
                     Container(
                      width: 300.0,
                      child: Card(
                        color: Colors.green,
                        child: Wrap(
                          children: <Widget>[
                            Expanded(
                              child: VideoPlayerApp(),
                            )

                          ],
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ]),
          )

        ],
      ),
    );
  }
}

`  enter image description here

0 个答案:

没有答案