Flutter/dart聊天实例|仿微信界面|红包|朋友圈
2020/5/14 8:26:23
本文主要是介绍Flutter/dart聊天实例|仿微信界面|红包|朋友圈,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
FlutterChatroom项目是基于flutter+dart+image_picker等技术实现的仿微信app聊天室实战项目。
一、技术框架
编码/技术:Vscode + Flutter 1.12.13/Dart 2.7.0
视频组件:chewie: ^0.9.7
图片/拍照:image_picker: ^0.6.6+1
图片预览组件:photo_view: ^0.9.2
弹窗组件:SimpleDialog/AlertDialog/SnackBar(flutter封装自定义)
本地存储:shared_preferences: ^0.5.7+1
字体图标:阿里iconfont字体图标库
鉴于flutter基于dart语言,需要安装Dart Sdk / Flutter Sdk
,如何搭建开发环境,可以去官网查阅资料
https://flutter.cn/
https://flutterchina.club/
https://pub.flutter-io.cn/
https://www.dartcn.com/
flutter沉浸式状态栏/底部tabbar
flutter中如何实现顶部全背景沉浸式透明状态栏(去掉状态栏黑色半透明背景),去掉右上角banner,可以去看这篇文章
https://segmentfault.com/a/1190000022483730
flutter图标组件/IconData自定义封装组件
1、使用系统图标组件:
Icon(Icons.search)
2、使用IconData方式:
Icon(IconData(0xe60e, fontFamily:'iconfont'), size:24.0)
使用第二种方式需要先下载阿里图标库字体文件,然后在pubspec.yaml中引入字体
class GStyle {
// __ 自定义图标
static iconfont(int codePoint, {double size = 16.0, Color color}) {
return Icon(
IconData(codePoint, fontFamily: 'iconfont', matchTextDirection: true),
size: size,
color: color,
);
}
}
调用非常简单,可自定义颜色、字体大小;GStyle.iconfont(0xe635, color: Colors.orange, size: 17.0)
flutter实现badge红点/圆点提示
class GStyle {
// 消息红点
static badge(int count, {Color color = Colors.red, bool isdot = false, double height = 18.0, double width = 18.0}) {
final _num = count > 99 ? '···' : count;
return Container(
alignment: Alignment.center, height: !isdot ? height : height/2, width: !isdot ? width : width/2,
decoration: BoxDecoration(color: color, borderRadius: BorderRadius.circular(100.0)),
child: !isdot ? Text('$_num', style: TextStyle(color: Colors.white, fontSize: 12.0)) : null
);
}
}
支持自定义红点大小、颜色,默认数字超过99就...显示;GStyle.badge(0, isdot:true)
GStyle.badge(13)
GStyle.badge(29, color: Colors.orange, height: 15.0, width: 15.0)
flutter聊天页面功能
在flutter中如何实现类似上图编辑器功能?通过TextField提供的多行文本框属性
maxLines
就可实现。
Container(
margin: GStyle.margin(10.0),
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(3.0)),
constraints: BoxConstraints(minHeight: 30.0, maxHeight: 150.0),
child: TextField(
maxLines: null,
keyboardType: TextInputType.multiline,
decoration: InputDecoration(
hintStyle: TextStyle(fontSize: 14.0),
isDense: true,
contentPadding: EdgeInsets.all(5.0),
border: OutlineInputBorder(borderSide: BorderSide.none)
),
controller: _textEditingController,
focusNode: _focusNode,
onChanged: (val) {
setState(() {
editorLastCursor = _textEditingController.selection.baseOffset;
});
},
onTap: () {handleEditorTaped();},
),
),
flutter实现滚动聊天信息到最底部
通过ListView里controller属性提供的jumpTo
方法及_msgController.position.maxScrollExtent
ScrollController _msgController = new ScrollController();
...
ListView(
controller: _msgController,
padding: EdgeInsets.all(10.0),
children: renderMsgTpl(),
)
// 滚动消息至聊天底部
void scrollMsgBottom() {
timer = Timer(Duration(milliseconds: 100), () => _msgController.jumpTo(_msgController.position.maxScrollExtent));
}
这篇关于Flutter/dart聊天实例|仿微信界面|红包|朋友圈的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-02springboot项目无法注册到nacos-icode9专业技术文章分享
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)