Flutter初步-第一个电视直播APP

#Flutter介绍

不介绍百度泛滥的，能搜到的，flutter对个人而言，易上手，业余人士也能迅速开发出一款跨平台APP，多么神奇啊。用的dart语言，scaffold 脚手架迅速对app布局，路由功能，更好管理页面。还有动画。小白能做到的极限就是到UI的设计，要更深入还得用dio库，学习get post使用，混编估计有点难，毕竟我连Java都没去了解过。
#Flutter安装
千篇一律，不多介绍,我用的是Android studio的安卓模拟器+vscode敲代码(vscode插件里面加几个插件扩展(extensions)，使dart语言敲起来更省时间。插件如下)

Awesome Flutter Snippets//能省去大量时间写架子
Dart
Flutter

#注意事项
在敲代码的时候很多括号会让自己写晕，所以要保持一个良好的习惯，该换行的换行，写注释的写注释。
小白应该多记笔记。
#在写Flutter之前你应该了解的一些操作：

vscode里flutter相关操作：
*如果你的flutter安装正确，就可以开始了解终端里flutter的一些用得到的命令：

flutter doctor//检查flutter整个功能是否正常

flutter create 文件夹名//创建一个包含demo的工作文档

flutter run//在编程无错误的情况下在设备上编译，安装，并调试程序

r//在调试中更新代码，热更新

flutter build apk //在你调试完后生成apk 我的莫名其妙不能生成，各位看着办吧，iOS改成flutter build iOS

-flutter项目文档结构

如图所示，小白一般就用到几个，pubspec.yaml lib文档下创建几个dart文件。
pubspec.yaml 用来装插件的，电视直播相关的信息名词各位可以先了解一下：

直播源、m3u8、投屏、DLNA、p2p、切片、ts

有些这个程序用不到，如果不太想弄懂的话可以只了解直播源、m3u8
直播源是一个地址，一般的是http://xxxxxxxxxxxxxxxx.m3u8
这就需要一个载体打开，播放器打开，有的播放器不支持，有的支持，首先国内有QQ浏览器X5内核sdk
这个可以，但操作麻烦，x86框架还得改文件里面东西，麻烦，demo运行也会出错，所以换一个来弄
此时我找到了chewie package GitHub里面有example，测试几个链接正常，所以就选它了
下载demo，经过chewie的介绍和代码的分析，发现chewie的example不仅仅用到了自家的player，还有
video player库，其他的chewie和chewie_player 的区别，我母鸡啊，某书的文章应该有，
打开chewie的example/lib/main.dart 然后自己写几个：

import 'package:chewie/chewie.dart';//导入chewie依赖
import 'package:chewie/src/chewie_player.dart';//导入chewie播放器依赖
import 'package:flutter/cupertino.dart';//导入iOS风格依赖
import 'package:flutter/material.dart';//flutter默认的一套UI
import 'package:video_player/video_player.dart';//一个video播放器
import 'package:url_launcher/url_launcher.dart';//这个是便于写加群功能的一个依赖 从某文章看到的
首先，出现了没有homepage怪，app启动对应ChewieDemo这个类，由它控制，flutter自带的demo可以简写，不要那么多麻烦的括号
void main() {runApp(ChewieDemo(),);
}
//出现了！套路格式 class xxxx extends StatefulWidget ChewieDemo 继承于statefulwidget 状态管理，对应的有StatelessWidget 二者区别总是记住了又忘了，有会的给俺普及一下。
class ChewieDemo extends StatefulWidget {ChewieDemo({this.title = '脉冲电视直播-基于chewie'});final String title;//flutter的 final功能可以参考csdn的 FreeAndWake给出的介绍@override//覆写 某书有介绍，百度一下你就知道State<StatefulWidget> createState() {return _ChewieDemoState();//返回 _ChewieDemoState()}
}
//出现了！套娃怪，此时又出现了继承，
class _ChewieDemoState extends State<ChewieDemo> {TargetPlatform _platform;目标平台，emmmm不懂VideoPlayerController _videoPlayerController1;//武汉直播 //控制实例化下同VideoPlayerController _videoPlayerController2;//CCTV13VideoPlayerController _videoPlayerController3;//CCTV1VideoPlayerController _videoPlayerController4;//CCTV6VideoPlayerController _videoPlayerController5;//CCTV5VideoPlayerController _videoPlayerController6;//虎牙电影ChewieController _chewieController; @overridevoid initState() {super.initState();//下面network就是直播源的地址。_videoPlayerController1 = VideoPlayerController.network('https://pl.live.weibo.com/alicdn/e48f83034f3e60014767e7e1574d7df3_wb720.m3u8');//武汉直播http://pl.live.weibo.com/alicdn/459a245fed4473430925dc5189427df6_6M.m3u8_videoPlayerController2 = VideoPlayerController.network('http://liveali.ifeng.com/live/CCTV.m3u8');//CCTV13http://liveali.ifeng.com/live/CCTV.m3u8_videoPlayerController3 = VideoPlayerController.network('http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8');//CCTV1http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8_videoPlayerController4 = VideoPlayerController.network('http://cctvalih5ca.v.myalicdn.com/live/cctv6_2/index.m3u8');//CCTV6http://cctvalih5ca.v.myalicdn.com/live/cctv6_2/index.m3u8_videoPlayerController5 = VideoPlayerController.network('http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8');//CCTV5+http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8_videoPlayerController6 = VideoPlayerController.network('http://aldirect.hls.huya.com/huyalive/28466698-2689656864-11551988268341919744-2847699194-10057-A-0-1_1200.m3u8');//电影_chewieController = ChewieController(videoPlayerController: _videoPlayerController1,aspectRatio: 3 / 2, //横宽比autoPlay: false,//自动播放looping: true,//循环 如果播放完// // Try playing around with some of these other options:showControls: false, //显示控制 下面的colors感觉没x用materialProgressColors: ChewieProgressColors(playedColor: Colors.red,handleColor: Colors.blue,backgroundColor: Colors.grey,bufferedColor: Colors.lightGreen,),placeholder: Container(color: Colors.grey,),autoInitialize: true, //自动初始化 emmmmmmm);}@override//下面是播放功能的控制void dispose() {_videoPlayerController1.dispose();_videoPlayerController2.dispose();_videoPlayerController3.dispose();_videoPlayerController4.dispose();_videoPlayerController5.dispose();_videoPlayerController6.dispose();_chewieController.dispose();super.dispose();}@override//渲染Widget build(BuildContext context) {return MaterialApp(title: widget.title, //标题theme: ThemeData.light().copyWith(platform: _platform ?? Theme.of(context).platform,),//主题 下面是脚手架 不多bibihome: Scaffold(appBar: AppBar(actions: <Widget>[IconButton(icon: Icon(Icons.group_add),//这是个图标按钮onPressed: (){callQQ();//按下事件。转到加群功能在本代码末尾}),],title: Text(widget.title),),body: Column(children: <Widget>[Expanded(child: Center(child: Chewie(controller: _chewieController,),),),FlatButton(//这是个flat按钮onPressed: () {_chewieController.enterFullScreen();},child: Text('Fullscreen'),),Row(//Row flutter的一个布局，对应的还有Columnchildren: <Widget>[//children child 傻傻分不清，不过，children里面可以有childExpanded(child: FlatButton(onPressed: () {setState(() {//状态_chewieController.dispose();_videoPlayerController2.pause();//第2个播放功能暂停_videoPlayerController2.seekTo(Duration(seconds: 0)); //进度条置0_videoPlayerController3.pause();_videoPlayerController3.seekTo(Duration(seconds: 0));_videoPlayerController4.pause();_videoPlayerController4.seekTo(Duration(seconds: 0));_videoPlayerController5.pause();_videoPlayerController5.seekTo(Duration(seconds: 0));_videoPlayerController6.pause();_videoPlayerController6.seekTo(Duration(seconds: 0));_chewieController = ChewieController(videoPlayerController: _videoPlayerController1, //控制第1个播放控制aspectRatio: 3/2,autoPlay: true,looping: true,);});},child: Padding(child: Text("武汉云监工"),padding: EdgeInsets.symmetric(vertical: 16.0),),),),Expanded(child: FlatButton(onPressed: () {setState(() {_chewieController.dispose();_videoPlayerController1.pause();_videoPlayerController1.seekTo(Duration(seconds: 0));_videoPlayerController3.pause();_videoPlayerController3.seekTo(Duration(seconds: 0));_videoPlayerController4.pause();_videoPlayerController4.seekTo(Duration(seconds: 0));_videoPlayerController5.pause();_videoPlayerController5.seekTo(Duration(seconds: 0));_videoPlayerController6.pause();_videoPlayerController6.seekTo(Duration(seconds: 0));_chewieController = ChewieController(videoPlayerController: _videoPlayerController2,aspectRatio: 3 / 2,autoPlay: true,looping: true,);});},child: Padding(padding: EdgeInsets.symmetric(vertical: 16.0),child: Text("CCTV13新闻"),),),),Expanded(child: FlatButton(onPressed: () {setState(() {_chewieController.dispose();_videoPlayerController1.pause();_videoPlayerController1.seekTo(Duration(seconds: 0));_videoPlayerController2.pause();_videoPlayerController2.seekTo(Duration(seconds: 0));_videoPlayerController4.pause();_videoPlayerController4.seekTo(Duration(seconds: 0));_videoPlayerController5.pause();_videoPlayerController5.seekTo(Duration(seconds: 0));_videoPlayerController6.pause();_videoPlayerController6.seekTo(Duration(seconds: 0));_chewieController = ChewieController(videoPlayerController: _videoPlayerController3,aspectRatio: 3 / 2,autoPlay: true,looping: true,);});},child: Padding(padding: EdgeInsets.symmetric(vertical: 16.0),child: Text("CCTV1综合"),),),)],),Row(children: <Widget>[// Expanded(//   child: FlatButton(//     onPressed: () {//       setState(() {//         _platform = TargetPlatform.android;//       });//     },//     child: Padding(//       child: Text("Android controls"),//       padding: EdgeInsets.symmetric(vertical: 16.0),//     ),//   ),// ),Expanded(child: FlatButton(onPressed: () {setState(() {_chewieController.dispose();_videoPlayerController1.pause();_videoPlayerController1.seekTo(Duration(seconds: 0));_videoPlayerController2.pause();_videoPlayerController2.seekTo(Duration(seconds: 0));_videoPlayerController3.pause();_videoPlayerController3.seekTo(Duration(seconds: 0));_videoPlayerController5.pause();_videoPlayerController5.seekTo(Duration(seconds: 0));_videoPlayerController6.pause();_videoPlayerController6.seekTo(Duration(seconds: 0));_chewieController = ChewieController(videoPlayerController: _videoPlayerController4,aspectRatio: 3/2,autoPlay: true,looping: true,);});},child: Padding(padding: EdgeInsets.symmetric(vertical: 16.0),child: Text("CCTV6电影"),),),),Expanded(child: FlatButton(onPressed: () {setState(() {_chewieController.dispose();_videoPlayerController1.pause();_videoPlayerController1.seekTo(Duration(seconds: 0));_videoPlayerController2.pause();_videoPlayerController2.seekTo(Duration(seconds: 0));_videoPlayerController3.pause();_videoPlayerController3.seekTo(Duration(seconds: 0));_videoPlayerController4.pause();_videoPlayerController4.seekTo(Duration(seconds: 0));_videoPlayerController6.pause();_videoPlayerController6.seekTo(Duration(seconds: 0));_chewieController = ChewieController(videoPlayerController: _videoPlayerController5,aspectRatio: 3 / 2,autoPlay: true,looping: true,);});},child: Padding(padding: EdgeInsets.symmetric(vertical: 16.0),child: Text("CCTV5体育"),),),),Expanded(child: FlatButton(onPressed: () {setState(() {_chewieController.dispose();_videoPlayerController1.pause();_videoPlayerController1.seekTo(Duration(seconds: 0));_videoPlayerController2.pause();_videoPlayerController2.seekTo(Duration(seconds: 0));_videoPlayerController3.pause();_videoPlayerController3.seekTo(Duration(seconds: 0));_videoPlayerController4.pause();_videoPlayerController4.seekTo(Duration(seconds: 0));_videoPlayerController5.pause();_videoPlayerController5.seekTo(Duration(seconds: 0));_chewieController = ChewieController(videoPlayerController: _videoPlayerController6,aspectRatio: 16/9,autoPlay: true,looping: true,);});},child: Padding(padding: EdgeInsets.symmetric(vertical: 16.0),child: Text("虎牙电影"),),),),],)],),),);}
}
//这是加QQ或QQ群的    ?? ?:是干嘛的可以自己搜下
void callQQ({int number = 365700128, bool isGroup = true}) async {String url = isGroup? 'mqqapi://card/show_pslcard?src_type=internal&version=1&uin=${number ?? 0}&card_type=group&source=qrcode': 'mqqwpa://im/chat?chat_type=wpa&uin=${number ?? 0}&version=1&src_type=web&web_src=oicqzone.com';if (await canLaunch(url)) {await launch(url);} else {print('不能访问');}}

到此写完了，如果会dio，可以做成别的，至此，一个app诞生。
见证下界面：
必看：源码因为大小限制，分为3部分，我发两部分，另一部分需要下载,见谅
资源如下：example.part1.rar 和example.part2.rar
链接：https://pan.baidu.com/s/1xl4kQlq8VKKJUf7GgsLXXw
提取码：az35
example.part3.rar链接：https://download.csdn.net/download/qq_21520773/12152776

或者你可以在这个资源直接获取源码这个链接是前面未切割的压缩包：
https://download.csdn.net/download/qq_21520773/12152723

Flutter初步-第一个电视直播APP相关推荐

apk安装到电视上看不到图标_零基础搭建电视直播APP平台第二弹（修改APP）
大家好 , 我是阿尘,欢迎来到:极梦小屋. 由于公众号改版,建议大家星标置顶本公众号,就可以第一时间接收到我们所推荐的精品资源啦! 为了大家更方便的交流和可以不错过每天的分享,所以特意建了一个交流 ...
电视家App体验探索安卓电视直播App哪家强？
安卓电视直播App深受普罗大众喜爱,特别是购买了电视盒子的朋友,不能通过网络观看电视直播简直是暴殄天物.自从广电一纸禁令登场,电视盒子基本不会预置电视直播功能,这时候一个安卓视频直播App更是必不可少 ...
app后台运行会给服务器发信息吗_零基础搭建电视直播APP平台第一弹（支持安卓+电视盒子）...
大家好 , 我是阿尘,欢迎来到:极梦小屋. 由于公众号改版,建议大家星标置顶本公众号,就可以第一时间接收到我们所推荐的精品资源啦! 为了大家更方便的交流和可以不错过每天的分享,所以特意建了一个交流 ...
Android电视直播 v5.6,龙龙直播app下载|龙龙直播apk2019官方版下载 v5.6.1 安卓版 - 数码资源网...
用手机看电视直播,首先你需要把龙龙直播app下载到手机上,龙龙直播apk2019官方版值得推荐,因为龙龙直播apk2019官方版支持全国各地的地方电视台的直播节目,而且都是高清的哦!同时APP支持手机 ...
Facebook正式上线视频直播:APP充当电视直播间
时下,类似"个人电视台"的手机视频直播功能越来越受到欢迎,本周四,Facebook也宣布向全美国用户推出视频直播服务,另外几周之内将会拓展到全球用户. 所谓手机视频直播,即将手机摄 ...
网络视频直播系统开发第一课，开发直播APP软件一定要懂的基础知识
"网络视频直播系统怎么开发.有什么难点"这类文章实在是太难写了,因为开发直播APP软件需要至少全国用户能够跨平台流畅观看,这其中涉及到的点太多太复杂了,所以讲清楚网络视频直播系统怎 ...
网络直播算是计算机技术吗,计算机网络技术与电视直播新闻的融合发展
摘要:随着计算机网络技术发展的越来越快,许多行业都开始普及计算机网络技术.电视直播新闻作为传统媒体,也开始应用计算机网络技术.随着我国的经济发展速度越来越快,很多人想要在第一时间之内了解国内外新闻,对 ...
像花椒，映客，来疯这种直播app，技术实现难度在哪？需要什么样技术人才，还有就是服务器带宽要求及成本？...
2019独角兽企业重金招聘Python工程师标准>>> 作者:宋少东链接:https://www.zhihu.com/question/41868659/answer/950920 ...
电视直播大全 android,手机电视直播大全
虽然现如今电视机已经成为了背景音乐,我们很少看电视,但是有些节目只能通过电视观看,手机电视直播大全这款app就帮助用户解决了想要看电视,但是身处于一个没有电视环境的尴尬状况,各种精彩的电视台任你选择, ...
教你如何做电视直播-个人经验分享
查看原文:http://www.zhiboshequ.com/application/iptv/462.html 在大型企事业单位内部,经常需要发布一些自办的节目内容来实现信息和文化内容的传递:在大型 ...

Flutter初步-第一个电视直播APP

Flutter初步-第一个电视直播APP相关推荐

最新文章

热门文章