打造低成本直播平台技术教程（三）Flutter环境搭建及直播...

上期和上上期我们进行了从零开始搭建直播平台的前后端技术选型，前端选用Flutter进行跨平台开发，节省安卓iOS重复开发，后台选用Go语言以保证高并发稳定的服务。那么本期我们将从前端开始，进行Flutter开发直播前端教程。

首先我们回顾下Flutter，Flutter是Google推出的一个新的用于构建跨平台的开发SDK，基于Dart语言，写一份代码，在Android和iOS平台上都可以运行。对于Flutter的一些简介和混合开发的知识，网上很多介绍，可以进一步了解原理。

我们现在开始搭建Flutter环境。Flutter支持Windows、Mac、Linux平台，因为篇幅关系，这里以Mac平台为例进行搭建Flutter开发环境。

获取Flutter SDK

1. 去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/binPATH

因为一些缘故，一些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/binPATH

注意：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(      [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);  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[0],icon: _currentIndex == 0                      ? _bottomIcon('images/nav/index00.jpg'): _bottomIcon('images/nav/index01.jpg')),BottomNavigationBarItem(                  label: _bottomNavList[1],icon: _currentIndex == 1                      ? _bottomIcon('images/nav/index10.jpg'): _bottomIcon('images/nav/index11.jpg')),BottomNavigationBarItem(                  label: _bottomNavList[2],icon: _currentIndex == 2                      ? _bottomIcon('images/nav/index20.jpg'): _bottomIcon('images/nav/index21.jpg')),BottomNavigationBarItem(                  label: _bottomNavList[3],icon: _currentIndex == 3                      ? _bottomIcon('images/nav/index30.jpg'): _bottomIcon('images/nav/index31.jpg')),BottomNavigationBarItem(                  label: _bottomNavList[4],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说的很不错