Flutter实战一Flutter聊天应用(六)
我们将使用Google登录来验证应用程序的用户。Google登录功能可让用户使用其Google帐户(与Gmail、Play、照片和其他Google服务所使用的帐户相同的帐户)进行安全登录。我们还可以根据与用户的Google帐户相关联的个人资料和身份信息,个性化用户体验。用户登录后,我们可以使用个人资料照片个性化聊天消息头像。 要添加对Google登录的支持,我们将使用 import 'package:google_sign_in/google_sign_in.dart';
要启用Google登录,需要在浏览器中打开Firebase控制台并选择我们的项目。导航到 要在iOS上配置Google登录,需要确保生成的 <key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLSchemes</key>
<array>
<!-- 反转客户端ID的URL -->
<string>com.googleusercontent.apps.462578386393-kisbgopib3t6plf4dgv3s0n4ur3svjmo</string>
<!-- 捆绑ID -->
<string>com.yourcompany.friendlychat</string>
</array>
</dict>
</array>
我们可以在 第一次启动应用程序时,可能需要一两分钟才能启动。在iOS上,需要额外的时间来初始化Cocapods repo,而在Android上,需要下载maven的依赖关系。在下一组更改之后,我们将能够重新加载应用程序,并且开发周期将快得多。 现在我们的应用程序仅限于单个用户和设备,当用户发送消息时,应用程序将其标记为 首先,添加一个名为 final googleSignIn = new GoogleSignIn();
现在定义两个私有方法,一个用于登录,另一个用于发送消息。添加 class ChatScreenState extends State<ChatScreen> with TickerProviderStateMixin {
//...
Future<Null> _ensureLoggedIn() async {
GoogleSignInAccount user = googleSignIn.currentUser;
if (user == null)
user = await googleSignIn.signInSilently();
if (user == null) {
await googleSignIn.signIn();
}
}
//...
}
以前的代码片段使用多个等待表达式依次执行Google登录方法。如果 现在提交消息的过程有两步,认证和发送。我们需要协调工作,以便首先认证,如果成功,那么用户可以发送消息。首先,将 在 class ChatScreenState extends State<ChatScreen> with TickerProviderStateMixin {
//...
Future _handleSubmitted(String text) async {
_textController.clear();
setState((){
_isComposing = false;
});
await _ensureLoggedIn();
_sendMessage(text: text);
}
//...
}
修改 class ChatScreenState extends State<ChatScreen> with TickerProviderStateMixin {
//...
void _sendMessage({ String text }) {
ChatMessage message = new ChatMessage(
text: text,animationController: new AnimationController(
duration: new Duration(milliseconds: 300),vsync: this
)
);
setState((){
_messages.insert(0,message);
});
message.animationController.forward();
}
//...
}
为了个性化头像,我们在 class ChatMessage extends StatelessWidget {
//...
@override
Widget build(BuildContext context) {
return new SizeTransition(
//...
child: new Container(
margin: const EdgeInsets.symmetric(vertical: 10.0),child: new Row(
crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[
new Container(
margin: const EdgeInsets.only(right: 16.0),child: new GoogleUserCircleAvatar(googleSignIn.currentUser.photoUrl),),//...
]
)
)
);
}
}
class ChatMessage extends StatelessWidget {
//...
@override
Widget build(BuildContext context) {
return new SizeTransition(
//...
child: new Container(
margin: const EdgeInsets.symmetric(vertical: 10.0),children: <Widget>[
//...
new Column(
crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[
new Text(
googleSignIn.currentUser.displayName,style: Theme.of(context).textTheme.subhead),new Container(
margin: const EdgeInsets.only(top: 5.0),child: new Text(text),)
]
)
]
)
)
);
}
}
现在,当我们发送消息时,头像和发件人姓名与您的Google帐户中的个人资料信息相匹配。随着我们继续进行更改并优化应用程序的UI,我们可以快速查看结果,而不需要重新启动完整的应用程序。使用Flutter的热重新加载功能将更新的源文件注入正在运行的Dart虚拟机(Dart Virtual Machine)并刷新UI。热重载是实验、原型设计和迭代的强大工具。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |