flutter 如何判断在哪个页面_Agora 教程：构建你的第一个 Flutter 视频通话应用
作者：张乾泽，声网Agora 工程师
我们基于 Agora SDK 封装了 Agora Flutter SDK ，开发者可以在 Flutter 应用中快速实现稳定、可靠的实时音视频通话、互动直播应用。本文将介绍如何使用 Agora Flutter SDK 快速构建一个简单的移动跨平台视频通话应用。
环境准备
在 Flutter 中文网(flutterchina.club)上，关于搭建开放环境的教程已经相对比较完善了，有关 IDE 与环境配置的过程本文不再赘述，若 Flutter 安装有问题，可以执行 flutter doctor 做配置检查。
本文使用 MacOS 下的 VS Code 作为主开发环境。
目标
我们希望可以使用 Flutter+Agora Flutter SDK 实现一个简单的视频通话应用，这个视频通话应用需要包含以下功能，
加入通话房间
视频通话
前后摄像头切换
本地静音/取消静音
声网的视频通话是按通话房间区分的，同一个通话房间内的用户都可以互通。为了方便区分，这个演示会需要一个简单的表单页面让用户提交选择加入哪一个房间。同时一个房间内可以容纳最多 4 个用户，当用户数不同时我们需要展示不同的布局。
想清楚了？动手撸代码了。
项目创建
首先在 VS Code 选择 查看->命令面板(或直接使用 cmd + shift + P)调出命令面板，输入 flutter 后选择 Flutter: New Project 创建一个新的 Flutter 项目，项目的名字为 agora_flutter_quickstart，随后等待项目创建完成即可。
现在执行 启动->启动调试(或 F5)即可看到一个最简单的计数 App。
看起来我们有了一个很好的开始
接下去我们需要对我们新建的项目做一下简单的配置以使其可以引用和使用 Agora Flutter SDK。
打开项目根目录下的 pubspec.yaml 文件，在 dependencies下添加 agora_rtc_engine:^0.9.0，
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
# add agora rtc sdk
agora_rtc_engine: ^0.9.0
dev_dependencies:
flutter_test:
sdk: flutter
保存后 VS Code 会自动执行 flutter packages get 更新依赖。
应用首页
在项目配置完成后，我们就可以开始开发了。首先我们需要创建一个页面文件替换掉默认示例代码中的 MyHomePage 类。我们可以在 lib/src 下创建一个 pages目录，并创建一个 index.dart 文件。
如果你已经完成了官方教程 Write your first Flutter app，那么以下代码对你来说就应该不难理解。
class IndexPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new IndexState();
}
}
class IndexState extends State<IndexPage> {
@override
Widget build(BuildContext context) {
// UI
}
onJoin() {
//TODO
}
}
现在我们需要开始在 build 方法中构造首页的 UI。
按上图分解 UI 后，我们可以将我们的首页代码修改如下
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Agora Flutter QuickStart'),
),
body: Center(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
height: 400,
child: Column(
children: <Widget>[
Row(children: <Widget>[]),
Row(children: <Widget>[
Expanded(
child: TextField(
decoration: InputDecoration(
border: UnderlineInputBorder(
borderSide: BorderSide(width: 1)),
hintText: 'Channel name'),
))
]),
Padding(
padding: EdgeInsets.symmetric(vertical: 20),
child: Row(
children: <Widget>[
Expanded(
child: RaisedButton(
onPressed: () => onJoin(),
child: Text("Join"),
color: Colors.blueAccent,
textColor: Colors.white,
),
)
],
))
],
)),
));
}
执行 F5 启动查看，应该可以看到下图
看起来不错！但也只是看起来不错。我们的UI现在只能看，还不能交互。我们希望可以基于现在的 UI 实现以下功能，
1. 为 Join 按钮添加回调导航到通话页面
2. 对频道名做检查，若尝试加入频道时频道名为空，则在 TextField 上提示错误
TextField 输入校验
TextField 自身提供了一个 decoration属性，我们可以提供一个 InputDecoration的对象来标识 TextField 的装饰样式。 InputDecoration里的 errorText属性非常适合在我们这里被拿来使用， 同时我们利用 TextEditingController对象来记录 TextField 的值，以判断当前是否应该显示错误。因此经过简单的修改后，我们的 TextField 代码就变成了这样：
final _channelController = TextEditingController();
/// if channel textfield is validated to have error
bool _validateError = false;
@override
void dispose() {
// dispose input controller
_channelController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
...
TextField(
controller: _channelController,
decoration: InputDecoration(
errorText: _validateError
? "Channel name is mandatory"
: null,
border: UnderlineInputBorder(
borderSide: BorderSide(width: 1)),
hintText: 'Channel name'),
))
...
}
onJoin() {
// update input validation
setState(() {
_channelController.text.isEmpty
? _validateError = true
: _validateError = false;
});
}
在点击加入频道按钮的时候回触发 onJoin回调，回调中会先通过 setState更新 TextField 的状态以做组件重绘。
注意: 不要忘了 override dispose方法在这个组件的生命周期结束时释放 _controller。
前往通话页面
到这里我们的首页基本就算完成了，最后我们在 onJoin中创建 MaterialPageRoute将用户导航到通话页面，在这里我们将获取的频道名作为通话页面构造函数的参数传递到下一个页面 CallPage。
import './call.dart';
class IndexState extends State<IndexPage> {
...
onJoin() {
// update input validation
setState(() {
_channelController.text.isEmpty
? _validateError = true
: _validateError = false;
});
if (_channelController.text.isNotEmpty) {
// push video page with given channel name
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => new CallPage(
channelName: _channelController.text,
)));
}
}
通话页面
同样在 /lib/src/pages目录下，我们需要新建一个 call.dart文件，在这个文件里我们会实现我们最重要的实时视频通话逻辑。首先还是需要创建我们的 CallPage类。如果你还记得我们在 IndexPage的实现， CallPage会需要在构造函数中带入一个参数作为频道名。
class CallPage extends StatefulWidget {
/// non-modifiable channel name of the page
final String channelName;
/// Creates a call page with given channel name.
const CallPage({Key key, this.channelName}) : super(key: key);
@override
_CallPageState createState() {
return new _CallPageState();
}
}
class _CallPageState extends State<CallPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.channelName),
),
backgroundColor: Colors.black,
body: Center(
child: Stack(
children: <Widget>[],
)));
}
}
这里需要注意的是，我们并不需要把参数在创建 state实例的时候传入， state可以直接访问 widget.channelName获取到组件的属性。
引入声网SDK
因为我们在最开始已经在 pubspec.yaml中添加了 agora_rtc_engine的依赖，因此我们现在可以直接通过以下方式引入声网 SDK。
import 'package:agora_rtc_engine/agora_rtc_engine.dart';
引入后即可以使用创建声网媒体引擎实例。在使用声网 SDK 进行视频通话之前，我们需要进行以下初始化工作。初始化工作应该在整个页面生命周期中只做一次，因此这里我们需要 override initState方法，在这个方法里做好初始化。
class _CallPageState extends State<CallPage> {
@override
void initState() {
super.initState();
initialize();
}
void initialize() {
_initAgoraRtcEngine();
_addAgoraEventHandlers();
}
/// Create agora sdk instance and initialze
void _initAgoraRtcEngine() {
AgoraRtcEngine.create(APP_ID);
AgoraRtcEngine.enableVideo();
}
/// Add agora event handlers
void _addAgoraEventHandlers() {
AgoraRtcEngine.onError = (int code) {
// sdk error
};
AgoraRtcEngine.onJoinChannelSuccess =
(String channel, int uid, int elapsed) {
// join channel success
};
AgoraRtcEngine.onUserJoined = (int uid, int elapsed) {
// there's a new user joining this channel
};
AgoraRtcEngine.onUserOffline = (int uid, int reason) {
// there's an existing user leaving this channel
};
}
}
注意: 有关如何获取声网 APP_ID，请访问 docs.gora.io 参阅官方文档。
在以上的代码中我们主要创建了声网的媒体 SDK 实例并监听了关键事件，接下去我们会开始做视频流的处理。
在一般的视频通话中，对于本地设备来说一共会有两种视频流，本地流与远端流 - 前者需要通过本地摄像头采集渲染并发送出去，后者需要接收远端流的数据后渲染。现在我们需要动态地将最多4人的视频流渲染到通话页面。
我们会以大致这样的结构渲染通话页面。
这里和首页不同的是，放置通话操作按钮的工具栏是覆盖在视频上的，因此这里我们会使用 Stack组件来放置层叠组件。
为了更好地区分 UI 构建，我们将视频构建与工具栏构建分为两个方法。
本地流创建与渲染
要渲染本地流，需要在初始化 SDK 完成后创建一个供视频流渲染的容器，然后通过 SDK 将本地流渲染到对应的容器上。声网 SDK 提供了 createNativeView的方法以创建容器，在获取到容器并且成功渲染到容器视图上后，我们就可以利用SDK加入频道与其他客户端互通了。
void initialize() {
_initAgoraRtcEngine();
_addAgoraEventHandlers();
// use _addRenderView everytime a native video view is needed
_addRenderView(0, (viewId) {
// local view setup & preview
AgoraRtcEngine.setupLocalVideo(viewId, 1);
AgoraRtcEngine.startPreview();
// state can access widget directly
AgoraRtcEngine.joinChannel(null, widget.channelName, null, 0);
});
}
/// Create a native view and add a new video session object
/// The native viewId can be used to set up local/remote view
void _addRenderView(int uid, Function(int viewId) finished) {
Widget view = AgoraRtcEngine.createNativeView(uid, (viewId) {
setState(() {
_getVideoSession(uid).viewId = viewId;
if (finished != null) {
finished(viewId);
}
});
});
VideoSession session = VideoSession(uid, view);
_sessions.add(session);
}
注意: 代码最后利用 uid 与容器信息创建了一个 VideoSession对象并添加到 _sessions中，这主要是为了视频布局需要，这块稍后会详细触及。
远端流监听与渲染
远端流的监听其实我们已经在前面的初始化代码中提及了，我们可以监听 SDK 提供的 onUserJoined与 onUserOffline回调来判断是否有其他用户进出当前频道，若有新用户加入频道，就为他创建一个渲染容器并做对应的渲染；若有用户离开频道，则去掉他的渲染容器。
AgoraRtcEngine.onUserJoined = (int uid, int elapsed) {
setState(() {
_addRenderView(uid, (viewId) {
AgoraRtcEngine.setupRemoteVideo(viewId, 1, uid);
});
});
};
AgoraRtcEngine.onUserOffline = (int uid, int reason) {
setState(() {
_removeRenderView(uid);
});
};
/// Remove a native view and remove an existing video session object
void _removeRenderView(int uid) {
VideoSession session = _getVideoSession(uid);
if (session != null) {
_sessions.remove(session);
}
AgoraRtcEngine.removeNativeView(session.viewId);
}
注意： _sessions的作用是在本地保存一份当前频道内的视频流列表信息。因此在用户加入的时候，需要创建对应的 VideoSession对象并添加到 sessions，在用户离开的时候，则需要删除对应的 VideoSession实例。
视频流布局
在有了 _sessions数组，且每一个本地/远端流都有了一个对应的原生渲染容器后，我们就可以开始对视频流进行布局了。
/// Helper function to get list of native views
List<Widget> _getRenderViews() {
return _sessions.map((session) => session.view).toList();
}
/// Video view wrapper
Widget _videoView(view) {
return Expanded(child: Container(child: view));
}
/// Video view row wrapper
Widget _expandedVideoRow(List<Widget> views) {
List<Widget> wrappedViews =
views.map((Widget view) => _videoView(view)).toList();
return Expanded(
child: Row(
children: wrappedViews,
));
}
/// Video layout wrapper
Widget _viewRows() {
List<Widget> views = _getRenderViews();
switch (views.length) {
case 1:
return Container(
child: Column(
children: <Widget>[_videoView(views[0])],
));
case 2:
return Container(
child: Column(
children: <Widget>[
_expandedVideoRow([views[0]]),
_expandedVideoRow([views[1]])
],
));
case 3:
return Container(
child: Column(
children: <Widget>[
_expandedVideoRow(views.sublist(0, 2)),
_expandedVideoRow(views.sublist(2, 3))
],
));
case 4:
return Container(
child: Column(
children: <Widget>[
_expandedVideoRow(views.sublist(0, 2)),
_expandedVideoRow(views.sublist(2, 4))
],
));
default:
}
return Container();
}
工具栏(挂断、静音、切换摄像头)
在实现完视频流布局后，我们接下来实现视频通话的操作工具栏。工具栏里有三个按钮，分别对应静音、挂断、切换摄像头的顺序。用简单的 flexRow布局即可。
/// Toolbar layout
Widget _toolbar() {
return Container(
alignment: Alignment.bottomCenter,
padding: EdgeInsets.symmetric(vertical: 48),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RawMaterialButton(
onPressed: () => _onToggleMute(),
child: new Icon(
muted ? Icons.mic : Icons.mic_off,
color: muted ? Colors.white : Colors.blueAccent,
size: 20.0,
),
shape: new CircleBorder(),
elevation: 2.0,
fillColor: muted?Colors.blueAccent : Colors.white,
padding: const EdgeInsets.all(12.0),
),
RawMaterialButton(
onPressed: () => _onCallEnd(context),
child: new Icon(
Icons.call_end,
color: Colors.white,
size: 35.0,
),
shape: new CircleBorder(),
elevation: 2.0,
fillColor: Colors.redAccent,
padding: const EdgeInsets.all(15.0),
),
RawMaterialButton(
onPressed: () => _onSwitchCamera(),
child: new Icon(
Icons.switch_camera,
color: Colors.blueAccent,
size: 20.0,
),
shape: new CircleBorder(),
elevation: 2.0,
fillColor: Colors.white,
padding: const EdgeInsets.all(12.0),
)
],
),
);
}
void _onCallEnd(BuildContext context) {
Navigator.pop(context);
}
void _onToggleMute() {
setState(() {
muted = !muted;
});
AgoraRtcEngine.muteLocalAudioStream(muted);
}
void _onSwitchCamera() {
AgoraRtcEngine.switchCamera();
}
最终整合
现在两个部分的 UI 都完成了，我们接下去要将这两个组件通过 Stack组装起来。
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.channelName),
),
backgroundColor: Colors.black,
body: Center(
child: Stack(
children: <Widget>[_viewRows(), _toolbar()],
)));
清理
若只在当前页面使用声网 SDK，则需要在离开前调用 destroy接口将 SDK 实例销毁。若需要跨页面使用，则推荐将 SDK 实例做成单例以供不同页面访问。同时也要注意对原生渲染容器的释放，可以至直接使用 removeNativeView方法释放对应的原生容器。
@override
void dispose() {
// clean up native views & destroy sdk
_sessions.forEach((session) {
AgoraRtcEngine.removeNativeView(session.viewId);
});
_sessions.clear();
AgoraRtcEngine.destroy();
super.dispose();
}
最终效果：
总结
Flutter 作为新生事物，难免还是有他不成熟的地方，但我们已经从他现在的进步上看到了巨大的潜力。从目前的体验来看，只要有充足的社区资源，在 Flutter 上开发跨平台应用还是比较舒服的。声网提供的 Flutter SDK 基本已经覆盖了原生 SDK 提供的大部分方法，开发体验基本可以和原生 SDK 开发保持一致。这次也是基于学习的态度写下了这篇文章，希望对于想要使用 Flutter 开发 RTC 应用的同学有所帮助。
文中讲解的完整代码及 Agora Flutter SDK 可在 Github 获取。
Agora Flutter SDK：
https://github.com/AgoraIO/Flutter-SDK
Quickstart Demo:
https://github.com/AgoraIO-Community/Agora-Flutter-Quickstart
相关阅读：
[1] Agora Flutter SDK：一套代码，实现双端通话
[2] Flutter 的渲染逻辑，以及与 Native 通信
[3] Flutter + WebRTC：Agora Flutter SDK 设计实践
如开发中遇到问题，可访问 RTC 开发者社区发帖提问
flutter 如何判断在哪个页面_Agora 教程：构建你的第一个 Flutter 视频通话应用相关推荐
- flutter 如何判断在哪个页面_如何判断初中英语辅导哪个更好呢？
如何判断初中英语辅导哪个更好呢? 1.教学模式 大部分线下英语辅导课采用集体授课,学生多,层次不同,如果学生在这样的环境下学习英语,教师就不能根据学生个体的学习情况来授课,学生的学习效果也不会特别理想 ...
- 构建你的第一个Flutter视频通话应用
Flutter 1.0 发布也已经有一段时间了,春节后声网发布了Flutter平台上的Agora Flutter SDK(一个基于 Flutter 开发的 Plugin),今天我们就来看一下如何使用A ...
- 从零开始写第一个Flutter app（八）——修改主题颜色
目录 从零开始写第一个Flutter app(一)--Hello World 从零开始写第一个Flutter app(二)--引用第三方包 从零开始写第一个Flutter app(三)--有状态的部件 ...
- java 滚动条的事件_[Java教程]jquery如何判断滚动条滚到页面底部并执行事件
[Java教程]jquery如何判断滚动条滚到页面底部并执行事件 0 2016-04-27 10:00:13 本文章向码农介绍jquery如何判断滚动条滚到页面底部并执行事件.首先理解三个dom元素, ...
- 子比zibll主题外链重定向go页面美化教程
目录 效果 教程开始 原文地址:[子比zibll主题外链重定向go页面美化教程](https://www.lbxz68.com/539/) 效果 教程开始 效果如上,将以下代码覆盖掉子比主题的go.p ...
- javascriptjquery 判断滚动到页面底部
js 判断滚动到页面底部 CreateTime--2018年4月14日10:13:07 Author:Marydon 1.使用场景: 滚动到屏幕底部,触发加载分页数据请求(qq空间,手机端) 2.代码 ...
- flutter 返回指定界面_Flutter页面路由导航及传参
转载请注明出处: https://learnandfish.com/ 概述 每个应用都有很多个页面,在flutter中同样也有很多页面,被称之为路由(Router),页面之间的跳转通过导航器(Navi ...
- 重度使用Flutter研发模式下的页面性能优化实践
简介: 淘宝特价版是集团内应用Flutter技术场景比较多,且用户量一亿人以上的应用了.目前我们首页.详情.店铺.我的,看看短视频,及评价,设置等二级页面都在用Flutter技术搭建.一旦Flutte ...
- 技术胖Flutter第四季-19导航父子页面的跳转返回
技术胖Flutter第四季-19导航父子页面的跳转返回 博客地址: https://jspang.com/post/flutter4.html#toc-010 onPressed是当前按下的时候,按下 ...
最新文章
- Plant Physiol. | 中科院遗传所储成才研究组发现水稻NLR类抗病基因突变导致的白叶枯病感病机制...
- 深入理解Java自带的线程池和缓冲队列
- AI检测制造“零缺陷”
- Interview：算法岗位面试—10.17早上—上海某科技公司算法岗位(偏算法，独角兽)非技术面试之比赛项目讲解和项目意义的探讨
- zookeeper安装( windows环境)
- 【疼逊】致广大QQ用户的一封信
- 我的web聊天之---序章
- python字典导入mongodb_Python语言生成内嵌式字典(dict)-案例从python提取内嵌json写入mongodb...
- java修改原有txt文件_(转)Java创建txt文件并进行读、写、修改操作
- linux top cpu瓶颈,Linux命令----分析CPU的瓶颈
- Jupyter Lab——使用tqdm.notebook.tqdm时没有出现进度条，提示“HBox(children=(FloatProgress……”
- 北京数学建模与计算机应用2018,2018年第八届MathorCup高校数学建模挑战赛
- 使用 flowplayer 播放视频
- 商标45类分类表明细表_商标45类分类表
- 对组件、模块、子系统、系统、框架、架构 定义浅析
- 分享几个appstore之外的iOS软件下载网址
- Ubuntu开发嵌入式串口权限问题
- SpringMVC整合mybatis(终结版)
- com.android.backupconfirm,使用ADB停用一些自己讨厌的东西记录备忘
- 程序员修炼之道读后感1
热门文章
- OpenStack精华问答 | OpenStack是云吗？
- 架构日趋复杂的今天，如何重构数据库和应用边界？
- OpenStack精华问答 | 如何处理常见故障？
- 云漫圈 | 学Python还是Java, 8张漫画带你全面分析
- php 织梦模板 防盗,dedecms 软件下载频道防盗链php代码
- Minio Docker 单机安装(二种模式) linux
- 解决Linux docker中的mysql区分大小写问题
- 2分钟 Docker 部署 SprinBoot 集成 Flowable 工作流引擎
- layui Form内容重置清空
- org.activiti.engine.ActivitiException: src-resolve: Cannot resolve the name 'extension' to a(n) 'ele