打造低成本直播平台技术教程（三）Flutter环境搭建及直播...
上期和上上期我们进行了从零开始搭建直播平台的前后端技术选型，前端选用Flutter进行跨平台开发，节省安卓iOS重复开发，后台选用Go语言以保证高并发稳定的服务。那么本期我们将从前端开始，进行Flutter开发直播前端教程。 首先我们回顾下Flutter，Flutter是Google推出的一个新的用于构建跨平台的开发SDK，基于Dart语言，写一份代码，在Android和iOS平台上都可以运行。对于Flutter的一些简介和混合开发的知识，网上很多介绍，可以进一步了解原理。 我们现在开始搭建Flutter环境。Flutter支持Windows、Mac、Linux平台，因为篇幅关系，这里以Mac平台为例进行搭建Flutter开发环境。 获取Flutter SDK1. 去Flutter官网下载最新的安装包
【Flutter官网】https://flutter.dev/docs/development/tools/sdk/releases#macos
如果官网需要梯子，可以使用Github下载
【Flutter Github地址】https://github.com/flutter/flutter/releases
2. 解压安装包到安装目录，用于将Flutter SDK放置在特定的文件夹位置。
3. 将路径添加到环境变量path中：
[*]
export PATH=“Flutter放置目录”/flutter/bin:$PATH
因为一些缘故，一些flutter命令需要联网获取数据，国内访问比较慢，甚至失败，所以要PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL设为国内镜像地址，一并加入环境变量。
打开或创建 ~/.bash_profile文件，将如下命令加入：
[*]
[*]
[*]
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
注意：PATH_TO_FLUTTER_GIT_DIRECTORY 为你的flutter文件夹路径，比如“~/document”
运行source .bash_profile进行刷新操作，使之生效。
注意：如果你发现每次都要重新source才能使flutter命令生效，那么需要修改~/.zshrc，添加source ~/.bash_profile即可。
运行flutter doctor
命令行执行flutter doctor命令来查看是否安装完成，以及需要安装的其他依赖。Dart SDK已经捆绑在flutter里了，不需要单独安装Dart。命令行输出会得到一些需要安装的软件或需要进行的一步执行操作，会加粗显示，按要求进行，或排查错误即可。
一般安装完成会有如下界面：
编辑器设置
Flutter支持使用很多IDE，如Android Studio，IntelliJ IDEA，VS Code等，我们这里大家可以按照自己的开发习惯选择不同的编辑器，进行安装对应的插件。以下用上一讲带大家下载完成的VS Code作为例子：
1. 启动VS Code
2. 选择左侧Extensions，在搜索框搜索“flutter”，选择Flutter，点击install安装，如下图：
3. 重启VS Code
4. 调用View>Command Palette...，输入“doctor”，选择“Flutter：Run Flutter Doctor”，在“OUTPUT”窗口查看是否插件安装成功，VS Code前面出现√就可以：
创建Flutter应用并运行
可以使用命令行在对应目录进行创建，如下代码进行创建一个名称为myapp的应用项目：
[*]
flutter create myapp
flutter程序代码位于lib/main.dart
也可以使用VS Code来创建，选择Flutter：New Project后输入Project名称为myapp即可。
连接了真机或者模拟器，我们在VS Code中按F5或者调用Debug>Start Debugging进行运行程序，一起正常，应该能够看到如下界面：
尝试改动main.dart里的代码：
改为“Hello 图玩直播”，只需要进行保存（cmd+s），或者点击热重载按钮：
不需要重新run整个项目，会发现手机界面已经进行了热重载，出现了Hello 图玩直播：
我们现在来看下Flutter工程目录：
我们flutter相关代码是在lib/main.dart进行完成的。那么android和ios就是可以直接运行的安卓和iOS工程，可以用Android Studio和XCode进行打开这两个工程并且直接进行运行。build文件夹存放的是构建项目时产生的数据文件、资源文件等。项目架构还是非常友好的，前期只需要关注的是lib文件夹和配置文件pubspec.yaml。
到此我们就已经完成了Flutter环境的搭建和Hello World操作，对于Flutter所需要的Dart语法，本系列教程将不做过多赘述，网上教程非常多，并且之前有过前端开发经验的开发者，新语言算不得困难。
到这儿今天的关于前端搭建的内容就讲完咯，可是好像学了半天还没进入正题吗，那肯定不行，那我们就多写一点，开始进入直播前端的搭建吧~干货满满！
直播界面搭建
先来看下，目前想要做成的界面：
底部导航栏分为：首页，附近，社区，关注，我的
“首页”用来展示所有直播间，“附近”用来展示附近的直播间，“社区”用来展示用户发出的图文状态类似于朋友圈或者微博，“关注”用来展示我关注的主播列表以及排行，“我的”用来展示个人主页以及设置等。
那么我们来看下main.dart：
首先还是建立一个ToivanLiveApp的类，继承于StatelessWidget ：
[*]
[*]
class ToivanLiveApp extends StatelessWidget {}
再建立一个main方法进行runApp操作：
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
void main() {WidgetsFlutterBinding.ensureInitialized();// 强制竖屏SystemChrome.setPreferredOrientations( );SystemChrome.setSystemUIOverlayStyle( SystemUiOverlayStyle(statusBarColor: Colors.transparent));runApp(ToivanLiveApp());}
那么ToivanLiveApp类里面怎么实现呢？要完成两个操作，第一就是build操作，第二是页面路由。
例如页面路由的建立，用于路由路径匹配：
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
Map<String, WidgetBuilder> routes = { '/': (BuildContext context) => SplashPage(), '/index': (BuildContext context) => DyIndexPage(), '/room': (BuildContext context) =>DyRoomPage(arguments: settings.arguments), '/login': (BuildContext context) =>DyLoginPage(arguments: settings.arguments), '/develop': (BuildContext context) => DevelopPage(), };
再说这个类必不可少的build方法。
首先建立返回的是多个Bloc，那么providers就要进行多个Bloc注册，然后一个child是以MateriaApp形式展现，title叫“图玩直播”，并声明它的一些样式。最后页面路由采用上面建立的路由路径匹配方法，代码如下：
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
Widget build(BuildContext context) { return MultiBlocProvider( providers: [BlocProvider<CounterBloc>( create: (context) => BlocObj.counter, ),BlocProvider<IndexBloc>( create: (context) => BlocObj.index, ), ],child: MaterialApp(title: '图玩直播',theme: ThemeData(scaffoldBackgroundColor: Color.fromARGB(255, 255, 255, 255),primarySwatch: Colors.orange,textTheme: TextTheme(bodyText1: TextStyle(color: Colors.black), ),appBarTheme: AppBarTheme(textTheme: TextTheme(headline6: TextStyle(color: Colors.black,fontSize: 18, ),bodyText1: TextStyle(color: Colors.black), ), ) // splashFactory: NoSplashFactory() ),onGenerateRoute: _getRoute, ), );}}
从路由路径来看，一进app会进入SplashPage，这是用于展示打开页面的，比如广告，logo等展示。然后进入index页面，index页面就是用于完成大的页面框架的，比如展示导航栏。
[*]
class IndexPage extends StatefulWidget {}
indexpage是继承于StatefulWidget的，并且抽象方法createState()返回我们自己接下来要写的IndexPageState状态类上。
IndexPageState这个状态类要完成的就是导航栏绘制以及页面跳转，声明一个底部导航栏list：final _bottomNavList = ["首页", "附近", "社区", "关注", "我的"];
绘制一个Scaffold组件进行导航栏样式绘制：
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
child: Scaffold( // 底部导航栏bottomNavigationBar: BottomNavigationBar(backgroundColor: Colors.white,currentIndex: _currentIndex,type: BottomNavigationBarType.fixed,selectedItemColor: Base.defaultColor,unselectedItemColor: Color(0xff333333),selectedFontSize: dp(12),unselectedFontSize: dp(12),onTap: (index) {if (mounted) setState(() { _currentIndex = index; }); _pageController.jumpToPage(index); }, items: [BottomNavigationBarItem( label: _bottomNavList,icon: _currentIndex == 0 ? _bottomIcon('images/nav/index00.jpg'): _bottomIcon('images/nav/index01.jpg')),BottomNavigationBarItem( label: _bottomNavList,icon: _currentIndex == 1 ? _bottomIcon('images/nav/index10.jpg'): _bottomIcon('images/nav/index11.jpg')),BottomNavigationBarItem( label: _bottomNavList,icon: _currentIndex == 2 ? _bottomIcon('images/nav/index20.jpg'): _bottomIcon('images/nav/index21.jpg')),BottomNavigationBarItem( label: _bottomNavList,icon: _currentIndex == 3 ? _bottomIcon('images/nav/index30.jpg'): _bottomIcon('images/nav/index31.jpg')),BottomNavigationBarItem( label: _bottomNavList,icon: _currentIndex == 4 ? _bottomIcon('images/nav/index40.jpg'): _bottomIcon('images/nav/index41.jpg')), ]),body: _currentPage(),
fit: BoxFit.contain, )),resizeToAvoidBottomPadding: false, ),
_currentPage()这个方法就是用来返回导航栏对应页面的组件的，那么我们就要在这个方法里完成页面跳转。在这个方法里建立page列表用于进行调用新页面组件即可。 到这里是不是完全懵了？一会儿StatelessWidget，StatefulWidget，一会儿页面路由路径，一会儿这个组件，那个状态类的。
那就对了，因为这只是给大家展示一下如何进行flutter绘制直播页面，真正都要理解，咱们还得慢慢从头开始理flutter的一些组件Widget，边系统性地理组件类型，边应用在直播前端页面搭建里，这样在完成整个前端教程的同时，也都能理解flutter的一些绘制原理和状态管理等。
LZ说的很不错
页:
[1]