1. 全栈程序员必看首页

Flutter初步-第一个电视直播APP「建议收藏」

全栈程序员-用户IM • • 未分类

Flutter初步-第一个电视直播APP「建议收藏」#Flutter介绍不介绍百度泛滥的，能搜到的，flutter对个人而言，易上手，业余人士也能迅速开发出一款跨平台APP，多么神奇啊。用的dart语言，scaffold脚手架迅速对app布局，路由功能，更好管理页面。还有动画。小白能做到的极限就是到UI的设计，要更深入还得用dio库，学习getpost使用，混编估计有点难，毕竟我连Java都没去了解过。#Flutter安装千篇一律，不多介…

大家好，又见面了，我是你们的朋友全栈君。

#Flutter介绍

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

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;//CCTV13
VideoPlayerController _videoPlayerController3;//CCTV1
VideoPlayerController _videoPlayerController4;//CCTV6
VideoPlayerController _videoPlayerController5;//CCTV5
VideoPlayerController _videoPlayerController6;//虎牙电影
ChewieController _chewieController; 
@override
void 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,
),//主题 下面是脚手架 不多bibi
home: 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的一个布局，对应的还有Column
children: <Widget>[//children child 傻傻分不清，不过，children里面可以有child
Expanded(
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诞生。
见证下界面：demo
必看：源码因为大小限制，分为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

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/140033.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0
blank

相关推荐

  • vscode支持java_vscode配置go环境

    vscode支持java_vscode配置go环境

    vscode支持java_vscode配置go环境VScode配置Java环境1.下载JDK方式一：手动下载JDKOracleJavaSEAdoptOpenJdkAzulZuluforAzure-EnterpriseEdition方式二：VSCode中下载JDK下载JAVA插件扩展方式一:windows平台下可以直接访问这个地址直接下载带有java插件的vscode方式二:在vscode中下载以下插件LanguageSupportforJavabyRedHatDebug

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年9月1日
  • pycharm 激活码 2022【在线注册码/序列号/破解码】 idea

    pycharm 激活码 2022【在线注册码/序列号/破解码】

    pycharm 激活码 2022【在线注册码/序列号/破解码】，https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧！

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年3月19日
  • 云之遥全攻略 上「建议收藏」

    云之遥全攻略 上「建议收藏」

    云之遥全攻略 上「建议收藏」转自dakkifox作者的和讯博客，很详尽很有用的一篇攻略。原贴地址：http://dakkifox.blog.hexun.com/45908818_d.html我是傻瓜分割线所谓傻瓜版，就是你照

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年8月2日
  • verycd下载办法_zj服务是啥意思

    verycd下载办法_zj服务是啥意思

    verycd下载办法_zj服务是啥意思
    阿汤：verycd关闭了下载，转型成为社交网站？那它与豆瓣/mtime有多少区别呢？没有verycd的下载总感觉还是很遗憾的，毕竟下载并不是所有都是盗版。正版化是我们的趋势，但电子化下载也是趋势。VeryCD关闭下载服务，或将转型作者: SafenZhai，发布于2011年01月23日20时08分.分类: 深度分析, 行业趋势..
    著名的下载网站VeryCD因尚未取得试听许可证，将要关闭下载相关的服务。
    VeryCD由黄一孟成立于2005年，致力于成为最大的免费P2P分享基

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年8月10日
  • 银行ATM活动图文档

    银行ATM活动图文档

    银行ATM活动图文档银行ATM问题陈述、词汇表、领域类图链接：http://blog.csdn.net/yingyingbaibai/article/details/70216506银行ATM用况图文档链接：http://blog.csdn.net/yingyingbaibai/article/details/70216792银行ATM分析类类图文档链接：http://blog.csdn.

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年5月24日
  • DHCP协议详解

    DHCP协议详解

    DHCP协议详解文章目录什么是DHCPDHCP协议DHCP报文种类DHCP报文格式DHCP工作流程IP地址分配方式租约表工作流程服务器处理流程什么是DHCPDHCP（DynamicHostConfigurationProtocol，动态主机配置协议），前身是BOOTP协议，是一个局域网的网络协议，使用UDP协议工作，统一使用两个IANA分配的端口：67（服务器端），68（客户端）。DHCP通常被用于局…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年5月10日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号