#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的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
