使用Chewie和Getx在Flutter中构建一个视频播放器

播放视频文件的能力是众多应用程序中的一项重要功能。在Flutter中实现这一功能是非常简单的。

然而，你应该注意到诸如Chewie和GetX等包和库。

Flutter中默认的video_player ，当用户想对视频执行某些操作时，会受到限制。

Chewie是一个应用编程接口，为默认的Flutter视频播放器增加了更多的功能。其中一些功能包括增加更多的播放控制。

在这篇文章中，我们将使用Chewie和GetX在Flutter中建立一个视频播放器。

我们将利用两个库。

Chewie

这是一个用于解码和其他播放功能的Flutter插件。它允许开发者创建惊人的应用程序，并能获得逐帧的控制。

Chewie是一个完全可定制的视频播放器，可以播放/流转几乎所有的视频格式。它还具有一个易于使用的API。

迅雷下载

这是一个用于从互联网下载文件的Dart库。它使从URL下载视频到一个输入流变得很容易。

GetX作为低级别的Android和iOS媒体API的封装器。因此，它可以被用来播放视频或捕捉照片。

在本教程中，我们将使用Chewie 来播放视频，使用GetX来从YouTube的API下载媒体文件。

前提条件

要想跟着学习，你需要。

• 安装Visual Studio或任何代码编辑器。
• 对Flutter有一定的了解。
• 熟悉Dart编程语言。

我们将创建一个屏幕来显示我们的视频播放器。这个屏幕将有用于控制播放的按钮和两个用于用户输入的文本字段。

我们的视频将从互联网上获取，而不是从本地存储中获取。

视频屏幕

这是我们视频播放器应用程序的主页。我们将使用这个页面来访问下载的视频。

让我们从带有标题的基本页面开始。

标题将被放置在页面的顶部，在Appbar widget里面。

class VideoScreen extends StatefulWidget { 
    @override
    VideoScreenState createState() => new VideoScreenState();
} 

class VideoScreenState extends State { 
      @override 

      Widget build(BuildContext context) { 
          return new Scaffold(//contains our components of the application.
              appBar: new AppBar( 

                title: new Text("Video Player"), 

              ),
            );
      } 
}

从上面的代码中，我们有一个简单的屏幕，包含Appbar 和Scaffold widget。

脚手架将包含我们的视频播放器的背景图片和两行：一行是顶部的play 按钮，另一行显示选定资源的title 和URL 。

我们将使用play 按钮来启动视频流。title 和URL 只是为了识别的目的。

对齐小组件

这个小组件包含一个容器，我们将在其中添加我们的组件。align 小组件的主要目的是确保UI组件将被正确放置在屏幕上。

Widget build(BuildContext context) { 

 return new Align( alignment: Alignment.center, //align the child at the center
 
    child: new Padding( 
      padding: const EdgeInsets.all(16.0),//all edges will be 16 pixels from the walls.

      child: new Container( 
        height: 300.0, width: 300.0, 
        decoration: new BoxDecoration( color: Colors.black45),
      ), 
    ), 
 ); 

}

我们使用align widget来定位元素在屏幕的center 。

在我们的例子中，它将是一个container ，所以我们将添加一个white 的背景和一个black 的边框，内部填充为16dp 。

颜色的选择使视频无论质量如何都能被观看。

行小部件

Row 小部件将包含几个按钮。这个小组件水平地容纳组件。

Container build(BuildContext context) { 

 return new Center( 
   child: new Column( 
     mainAxisAlignment: MainAxisAlignment.center, 
     children: <Widget>[ new Padding( 
       padding: const EdgeInsets.symmetric(vertical: 16.0), child: new Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, 
       children: <Widget>[ buildButton('PLAY', context), buildButton('STEP_BACKWARD', context),

        ],

      ), ), 

    new Expanded(
            child: new Container( 
              height: 300.0, width: 300.0,
              decoration: new BoxDecoration( 
                borderRadius: new BorderRadius.circular(10.0)), color: Colors.black45, 
                margin: const EdgeInsets.all(16.0), ), ), 

    new Padding( 
            padding: const EdgeInsets.symmetric(horizontal: 16.0), 
              child: new Row( 
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[ buildButton('PLAY', context), buildButton('STEP_FORWARD', context), 
                    ], 

                  ), ),

                ], 

            ); 

}

该行包含两个按钮：play 和skipping 。

我们使用两个Expanded 小部件。

• 第一个让我们在我们的Container ，添加一个圆形的border-radius 。

• 第二个小组件允许我们在我们的视频播放器的顶部和底部添加更多的填充物。

我们要在整个屏幕上使用Padding 。然而，我们需要它在行的两个方向上。

这是因为我们将有一个横跨所有宽度的按钮（"PLAY"）和另一个宽度较小的按钮（"STEP_BACKWARD"）。

现在，让我们看看我们将如何在这一行建立元素。首先，我们必须创建一个包含一些文本的按钮。

按钮

按钮部件被用来执行或激活我们应用程序中的特定动作。

Widget buildButton(String title, BuildContext context) { 

 return new Container( 
    height: 50.0, padding: const EdgeInsets.only(top: 5.0),
     decoration: new BoxDecoration( color: Colors.white, ),
      child: new Text( title, style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0), 
      ), 
      ); 

}

如上图所示，我们用一个Container 来创建一个按钮，高度为50dp ，顶部填充为5dp 。

接下来，我们添加一个BoxDecoration 来应用一个白色背景，高度和宽度与我们的Container 相同。

最后，我们在按钮内添加文本。在这种情况下，它只是一些随机的字符串。

我们使用buildButton 方法，该方法接收一个参数，即应该出现在我们的按钮中的字符串。然后，它返回建立的按钮Container 。

我们对其他按钮重复同样的程序。

Widget buildButton(String title, BuildContext context) { 

 return new Container(
    height: 50.0, padding: const EdgeInsets.only(top: 5.0), decoration: new BoxDecoration( 
      color: Colors.white, 

      ), 

      child: new Text( title, style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0), 

      ),
 ); 

}

这一次，我们只需要对文本进行一点点的修改。

首先，STEP_BACKWARD 字符串应该出现在blue 。因此，我们添加第二个参数，称为color ，其值为Colors. blue 。

我们现在需要更新我们的主方法以显示视频播放器。

void main() { 

 runApp(new VideoPlayerApp());

}

我们将在主方法中实例化VideoPlayerApp ，然后我们创建一个新的实例（使用我们的视频URL）来开始播放。

RunApp 方法运行我们的应用程序。对于这种情况，它将运行VideoPlayerApp。

我们在这个例子中使用了以下小部件。

Widget buildButton(String title, BuildContext context) { 

 return new Container( 

   height: 50.0, padding: const EdgeInsets.only(top: 5.0), decoration: new BoxDecoration( 

     color: Colors.white, ),

      child: new Text( title, style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),

   ), 

 ); 

}

Widget buildButton(String title, BuildContext context, [Color color]) { 

 return new Container(

   height: 50.0, padding: const EdgeInsets.only(top: 5.0), decoration: new BoxDecoration( color: color, ),

    child: new Text( title,

     style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),

    ), 

 ); 

}

Chewie和Getx是Flutter中视频播放器应用程序的一个完美组合。您可以在您的手机上测试该应用程序，添加更多的功能，并将其用于您的好或开发您的视频播放器。

总结

在这篇文章中，我们使用Flutter、Chewie和GetX构建了一个视频播放器应用程序。

Chewie和GetX使我们能够轻松地在我们的应用程序中加入流媒体功能。