简体   繁体   English

如何使用 ListView 和 video_player(插件)显示设备存储中的视频列表?

[英]How to display a list of videos from device storage using ListView & video_player (plugin)?

I am building an app that requires me to list videos from the device storage in a list view.我正在构建一个应用程序,需要我在列表视图中列出设备存储中的视频。

I tried using ListView & video_player within each item of the ListView, but the app kept crashing.我尝试在 ListView 的每个项目中使用 ListView 和 video_player,但应用程序一直崩溃。


class VideosState extends State<Videos> {
  List<String> videoList;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    final videoList = _dir.listSync().map((item) => item.path).where(
            (item) => item.endsWith(".mp4") || item.endsWith(".avi") || item.endsWith(".webm")
    ).toList(growable: false);
    if (videoList != null) {
      if (videoList.length > 0) {
        return ListView.builder(
            padding: EdgeInsets.only(left: 10, right: 10, bottom: 16),
            itemBuilder: (BuildContext _context, int index) {
              if (index >= videoList.length) {
                return null;
              }
              return VideoPlayerScreen(
                path: videoList[index],
              );
            }
        );
    }
    }
    return VideoPlayerScreen(
      path: videoList[0],
    );
  }
}

class VideoPlayerScreen extends StatefulWidget {
  final String path;

  VideoPlayerScreen({Key key, @required this.path}): super(key: key);

  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState(
    path: this.path,
  );
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  VideoPlayerController _controller;
  Future<void> _initializeVideoPlayerFeature;
  final String path;

  _VideoPlayerScreenState({Key key, @required this.path});

  @override
  void initState() {
    _controller = VideoPlayerController.file(File(path));
    _initializeVideoPlayerFeature = _controller.initialize();
    _controller.setLooping(true);
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: FutureBuilder(
          future: _initializeVideoPlayerFeature,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              return AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              );
            }
            return Center(child: CircularProgressIndicator());
          }
    ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            if (_controller.value.isPlaying) {
              _controller.pause();
            } else {
              _controller.play();
            }
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      )
    );
  }
}

Expected results - List of videos that can be played预期结果 - 可以播放的视频列表

Actual results - Multiple FlutterErrors are being raised by the rendering library.实际结果 - 渲染库引发了多个 FlutterErrors。 This is happening for performLayout() function.这发生在 performLayout() 函数中。 This is stemming from video player object of size infinity.这源于大小无穷大的视频播放器对象。

I/flutter (31463): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (31463): The following assertion was thrown during performLayout():
I/flutter (31463): FlutterError contained multiple error summaries.
I/flutter (31463): All FlutterError objects should have only a single short (one line) summary description of the
I/flutter (31463): problem that was detected.
I/flutter (31463): Malformed FlutterError:
I/flutter (31463):   RenderCustomMultiChildLayoutBox object was given an infinite size during layout.
I/flutter (31463):   This probably means that it is a render object that tries to be as big as possible, but it was put
I/flutter (31463):   inside another render object that allows its children to pick their own size.
I/flutter (31463):   RenderCustomMultiChildLayoutBox object was given an infinite size during layout.
I/flutter (31463):   This probably means that it is a render object that tries to be as big as possible, but it was put
I/flutter (31463):   inside another render object that allows its children to pick their own size.
I/flutter (31463):   The nearest ancestor providing an unbounded height constraint is: RenderIndexedSemantics#572bc relayoutBoundary=up3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
I/flutter (31463):     creator: IndexedSemantics ← NotificationListener<KeepAliveNotification> ← KeepAlive ←
I/flutter (31463):       AutomaticKeepAlive ← KeyedSubtree ← SliverList ← SliverPadding ← Viewport ←
I/flutter (31463):       IgnorePointer-[GlobalKey#dfbbe] ← Semantics ← Listener ← _GestureSemantics ← ⋯
I/flutter (31463):     parentData: index=0; layoutOffset=0.0 (can use size)
I/flutter (31463):     constraints: BoxConstraints(w=391.4, 0.0<=h<=Infinity)
I/flutter (31463):     semantic boundary
I/flutter (31463):     size: MISSING
I/flutter (31463):     index: 0
I/flutter (31463):   The constraints that applied to the RenderCustomMultiChildLayoutBox were:
I/flutter (31463):     BoxConstraints(w=391.4, 0.0<=h<=Infinity)
I/flutter (31463):   The exact size it was given was:
I/flutter (31463):     Size(391.4, Infinity)
I/flutter (31463):   See https://flutter.dev/docs/development/ui/layout/box-constraints for more information.
I/flutter (31463): 
I/flutter (31463): The malformed error has 2 summaries.
I/flutter (31463): Summary 1: RenderCustomMultiChildLayoutBox object was given an infinite size during layout.
I/flutter (31463): Summary 2: RenderCustomMultiChildLayoutBox object was given an infinite size during layout.
I/flutter (31463): 
I/flutter (31463): This error should still help you solve your problem, however please also report this malformed error
I/flutter (31463): in the framework by filing a bug on GitHub:
I/flutter (31463):   https://github.com/flutter/flutter/issues/new?template=BUG.md
I/flutter (31463): 
I/flutter (31463): When the exception was thrown, this was the stack:
I/flutter (31463): #0      new FlutterError.fromParts.<anonymous closure> (package:flutter/src/foundation/assertions.dart:540:9)
I/flutter (31463): #1      new FlutterError.fromParts (package:flutter/src/foundation/assertions.dart:543:6)
I/flutter (31463): #2      RenderBox.debugAssertDoesMeetConstraints.<anonymous closure> (package:flutter/src/rendering/box.dart:1966:28)
I/flutter (31463): #3      RenderBox.debugAssertDoesMeetConstraints (package:flutter/src/rendering/box.dart:2029:6)
I/flutter (31463): #4      RenderBox.size=.<anonymous closure> (package:flutter/src/rendering/box.dart:1740:7)
I/flutter (31463): #5      RenderBox.size= (package:flutter/src/rendering/box.dart:1742:6)
I/flutter (31463): #6      RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:355:5)
I/flutter (31463): #7      RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #8      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #9      RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #10     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #11     _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1214:11)
I/flutter (31463): #12     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #13     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #14     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #15     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #16     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #17     RenderSliverList.performLayout (package:flutter/src/rendering/sliver_list.dart:165:27)
I/flutter (31463): #18     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #19     RenderSliverPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:181:11)
I/flutter (31463): #20     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #21     RenderViewportBase.layoutChildSequence (package:flutter/src/rendering/viewport.dart:406:13)
I/flutter (31463): #22     RenderViewport._attemptLayout (package:flutter/src/rendering/viewport.dart:1334:12)
I/flutter (31463): #23     RenderViewport.performLayout (package:flutter/src/rendering/viewport.dart:1252:20)
I/flutter (31463): #24     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #25     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #26     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #27     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #28     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #29     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #30     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #31     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #32     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #33     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #34     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #35     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #36     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #37     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #38     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #39     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #40     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #41     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #42     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #43     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #44     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #45     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #46     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #47     RenderSliverFixedExtentBoxAdaptor.performLayout (package:flutter/src/rendering/sliver_fixed_extent_list.dart:208:18)
I/flutter (31463): #48     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #49     RenderViewportBase.layoutChildSequence (package:flutter/src/rendering/viewport.dart:406:13)
I/flutter (31463): #50     RenderViewport._attemptLayout (package:flutter/src/rendering/viewport.dart:1334:12)
I/flutter (31463): #51     RenderViewport.performLayout (package:flutter/src/rendering/viewport.dart:1252:20)
I/flutter (31463): #52     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #53     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #54     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #55     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #56     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #57     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #58     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #59     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #60     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #61     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #62     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #63     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #64     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #65     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #66     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #67     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #68     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #69     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter (31463): #70     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
I/flutter (31463): #71     MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:142:11)
I/flutter (31463): #72     _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:443:7)
I/flutter (31463): #73     MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:212:7)
I/flutter (31463): #74     RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:356:14)
I/flutter (31463): #75     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1496:7)
I/flutter (31463): #76     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:765:18)
I/flutter (31463): #77     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:346:19)
I/flutter (31463): #78     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:701:13)
I/flutter (31463): #79     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:285:5)
I/flutter (31463): #80     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1016:15)
I/flutter (31463): #81     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:958:9)
I/flutter (31463): #82     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:874:5)
I/flutter (31463): #86     _invoke (dart:ui/hooks.dart:236:10)
I/flutter (31463): #87     _drawFrame (dart:ui/hooks.dart:194:3)
I/flutter (31463): (elided 3 frames from package dart:async)
I/flutter (31463): 
I/flutter (31463): The following RenderObject was being processed when the exception was fired: RenderCustomMultiChildLayoutBox#5371c relayoutBoundary=up7 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
I/flutter (31463):   creator: CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ←
I/flutter (31463):     _InkFeatures-[GlobalKey#ea4a9 ink renderer] ← NotificationListener<LayoutChangedNotification> ←
I/flutter (31463):     PhysicalModel ← AnimatedPhysicalModel ← Material ← PrimaryScrollController ← _ScaffoldScope ←
I/flutter (31463):     Scaffold ← ⋯
I/flutter (31463):   parentData: <none> (can use size)
I/flutter (31463):   constraints: BoxConstraints(w=391.4, 0.0<=h<=Infinity)
I/flutter (31463):   size: Size(391.4, Infinity)
I/flutter (31463): This RenderObject had the following descendants (showing up to depth 5):
I/flutter (31463):     child 1: RenderPositionedBox#dcc4f NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
W/VideoCapabilities(31463): Unsupported mime video/divx
W/VideoCapabilities(31463): Unsupported mime video/divx311
W/VideoCapabilities(31463): Unsupported mime video/divx4
W/VideoCapabilities(31463): Unrecognized profile 4 for video/hevc
W/VideoCapabilities(31463): Unrecognized profile/level 0/3 for video/mpeg2
W/VideoCapabilities(31463): Unrecognized profile/level 0/3 for video/mpeg2
W/VideoCapabilities(31463): Unsupported mime video/x-ms-wmv
W/VideoCapabilities(31463): Unsupported mime video/x-ms-wmv
I/VideoCapabilities(31463): Unsupported profile 4 for video/mp4v-es
I/MediaCodec(31463): name: OMX.qcom.video.decoder.avc
E/MediaCodec(31463): MediaCodec::CreateByComponentName:OMX.qcom.video.decoder.avc
I/OMXClient(31463): IOmx service obtained
I/MediaCodec(31463): configure format is :{csd-1=java.nio.HeapByteBuffer[pos=0 lim=9 cap=9], max-height=1184, max-width=720, mime=video/avc, width=720, priority=0, rotation-degrees=0, max-input-size=240655, height=1184, csd-0=java.nio.HeapByteBuffer[pos=0 lim=22 cap=22]}
D/SurfaceUtils(31463): connecting to surface 0x7a79066010, reason connectToSurface
I/MediaCodec(31463): [OMX.qcom.video.decoder.avc] setting surface generation to 32218113
D/SurfaceUtils(31463): disconnecting from surface 0x7a79066010, reason connectToSurface(reconnect)
D/SurfaceUtils(31463): connecting to surface 0x7a79066010, reason connectToSurface(reconnect)
I/ExtendedACodec(31463): setupVideoDecoder()
I/ExtendedACodec(31463): Decoder will be in frame by frame mode
I/MediaCodec(31463): start
D/SurfaceUtils(31463): set up nativeWindow 0x7a79066010 for 720x1184, color 0x7fa30c06, rotation 0, usage 0x20002900
W/MapperHal(31463): buffer descriptor with invalid usage bits 0x2000
I/chatty  (31463): uid=11657(<package_name>) CodecLooper identical 2 lines
W/MapperHal(31463): buffer descriptor with invalid usage bits 0x2000
D/SurfaceUtils(31463): set up nativeWindow 0x7a79066010 for 720x1184, color 0x7fa30c06, rotation 0, usage 0x20002900
W/MapperHal(31463): buffer descriptor with invalid usage bits 0x2000
I/chatty  (31463): uid=11657(<package_name>) JNISurfaceTextu identical 1 line
W/MapperHal(31463): buffer descriptor with invalid usage bits 0x2000
I/flutter (31463):       child: RenderSemanticsAnnotations#00740 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (31463):         child: RenderConstrainedBox#d4ba5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (31463):           child: RenderCustomPaint#dbb1c NEEDS-LAYOUT NEEDS-PAINT
I/flutter (31463):     child 2: RenderStack#b1bda NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (31463):       child 1: RenderTransform#bd383 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (31463):         child: RenderTransform#201dc NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (31463):           child: RenderMergeSemantics#5d292 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (31463):             child: RenderConstrainedBox#417c9 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (31463): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter (31463): Another exception was thrown: FlutterError contained multiple error summaries.
I/chatty  (31463): uid=11657(<package_name>) 1.ui identical 7 lines
I/flutter (31463): Another exception was thrown: FlutterError contained multiple error summaries.

I am developing an application to fetch videos from local storage.我正在开发一个应用程序来从本地存储中获取视频。

In my case, this code works perfectly.就我而言,此代码完美运行。

You can use https://pub.dev/packages/chewie plugin as video player.您可以使用https://pub.dev/packages/chewie插件作为视频播放器。

And https://pub.dev/packages/thumbnails plugin to create videos thumbnails.https://pub.dev/packages/thumbnails插件来创建视频缩略图。

I have used GridView.builder to show videos, you can use ListView.builder instead.我已经使用 GridView.builder 来显示视频,您可以使用 ListView.builder 代替。

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:thumbnails/thumbnails.dart';
import '../utils/video_play.dart';

final Directory _videoDir = Directory(
   '/storage/emulated/0/Android/data/com.example.downloader/files');

class VideoScreen extends StatefulWidget {
   const VideoScreen({Key key}) : super(key: key);
@override
VideoScreenState createState() => VideoScreenState();
}

class VideoScreenState extends State<VideoScreen> {

@override
Widget build(BuildContext context) {
if (!Directory("${_videoDir.path}").existsSync()) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      const Text(
        'Directory not found',
        style: TextStyle(fontSize: 18.0),
      ),
    ],
  );
} else {
  final videoList = _videoDir
      .listSync()
      .map((item) => item.path)
      .where((item) => item.endsWith('.mp4'))
      .toList(growable: false);
  if (videoList != null) {
    if (videoList.length > 0) {
      return Container(
        margin: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8.0),
        child: GridView.builder(
          itemCount: videoList.length,
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            childAspectRatio: 1.6 / 2.0,
            mainAxisSpacing: 8.0,
            crossAxisSpacing: 8.0,
          ),
          itemBuilder: (context, index) {
            return InkWell(
              onTap: () => Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => PlayStatus(
                    videoFile: videoList[index],
                  ),
                ),
              ),
              child: ClipRRect(
                borderRadius: const BorderRadius.all(Radius.circular(6)),
                child: Stack(
                  children: [
                    Center(
                      child: FutureBuilder(
                          future: _getImage(videoList[index]),
                          builder: (context, snapshot) {
                            if (snapshot.connectionState ==
                                ConnectionState.done) {
                              if (snapshot.hasData) {
                                return Hero(
                                  tag: videoList[index],
                                  child: Image.file(
                                    File(snapshot.data),
                                    fit: BoxFit.cover,
                                  ),
                                );
                              } else {
                                return Center(
                                  child: Image.asset(
                                    "assets/images/video_loader.gif",
                                    fit: BoxFit.cover,
                                  ),
                                );
                              }
                            } else {
                              return Center(
                                child: Image.asset(
                                  "assets/images/video_loader.gif",
                                  fit: BoxFit.fitHeight,
                                ),
                              );
                            }
                          }),
                    ),
                    Positioned(
                        child: Center(
                          child: Icon(
                      Icons.play_circle_outline_outlined,
                      size: 36,
                      color: Colors.white,
                    ),
                        ))
                  ],
                ),
              ),
            );
          },
        ),
      );
    } else {
      return const Center(
        child: Text(
          'Sorry, No Videos Found.',
          style: TextStyle(fontSize: 18.0),
        ),
      );
    }
  } else {
    return const Center(
      child: CircularProgressIndicator(),
    );
  }
 }
}

  _getImage(videoPathUrl) async {
  await Future.delayed(Duration(milliseconds: 500));
  String thumb = await Thumbnails.getThumbnail(
      videoFile: videoPathUrl,
      imageType: ThumbFormat.PNG, //this image will store in created folderpath
      quality: 1);
      return thumb;
     }
   }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM