flutter_im_kit
概述
flutter_im_kit 是一套基于 Flutter 的 IM 组件库，提供 IM 业务场景下的常用 UI 组件和解决方案。
组件集合
flutter_excellent_badge
常用于消息提醒的红点展示。
BadgePosition
用于设置 flutter_excellent_badge 位置的类
BadgePosition.topLeft
BadgePosition.topRight
BadgePosition.bottomRight
BadgePosition.bottomLeft
flutter_excellent_badge 示例
设置 badge 位置
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ExcellentBadge(
position: BadgePosition.topLeft(),
count: 1,
showBadge: true,
child: RRectBox(),
),
ExcellentBadge(
count: 1,
showBadge: true,
child: RRectBox(),
),
ExcellentBadge(
position: BadgePosition.bottomLeft(),
count: 1,
showBadge: true,
child: RRectBox(),
),
ExcellentBadge(
position: BadgePosition.bottomRight(),
count: 1,
showBadge: true,
child: RRectBox(),
),
],
)
自定义红点数量转换器
设置超过 500 条消息展示 500+
ExcellentBadge(
count: 600,
badgeCountConvertor: (int count) {
if (count <= 500) {
return count.toString();
}
return '500+';
},
showBadge: true,
child: Container(
width: 30,
height: 30,
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(4.0),),
),
)
使用红点
ExcellentBadge(
useRedDot: true,
showBadge: true,
size: 10,
position: BadgePosition.topRight(top: -5.0, right: -5.0),
child: Container(
width: 30,
height: 30,
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(4.0),),),
)
自定义样式
ExcellentBadge(
count: 99,
showBadge: true,
badgeDecoration: BoxDecoration(
color: Colors.lightGreen,
borderRadius: BorderRadius.all(Radius.circular(9.0)),
border: Border.all(width: 1, color: Colors.white),
),
child: Container( width: 30, height: 30, decoration: BoxDecoration( color: Colors.black26, borderRadius: BorderRadius.circular(4.0),)),
)
自定义 widget builder
ExcellentBadge(
showBadge: true,
count: 12,
size: 10,
position: BadgePosition.topRight(top: -12.0, right: -4.0),
builder: (BuildContext context, int count) {
return Container(
height: 18.0,
width: 18.0,
child: Icon(
Icons.star,
color: Colors.amber,
),
);
},
child: Container(
width: 30,
height: 30,
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(4.0),),),
)
flutter_excellent_bubble
气泡组件，常用于 IM 消息背景
BubblePosition
用于设置带箭头气泡的箭头位置
enum BubblePosition {
leftTop,
leftCenter,
leftBottom,
topLeft,
topCenter,
topRight,
rightTop,
rightCenter,
rightBottom,
bottomLeft,
bottomCenter,
bottomRight,
}
BubbleType
气泡类型
enum BubbleType {
Normal, /// 带箭头的气泡
RoundRect, /// 圆角矩形气泡
}dart
flutter_excellent_bubble 示例
圆角矩形气泡
ExcellentBubble(
child: Container(
alignment: Alignment.center,
width: 180,
// height: 36.0,
child: Text(
'圆角矩形',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
),
)),
bubbleType: BubbleType.RoundRect,
)
设置单脚弧度数
ExcellentBubble(
child: Container(
alignment: Alignment.center,
width: 180,
// height: 36.0,
child: Text(
'绿色-左上角修改',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
),
)),
bubbleType: BubbleType.RoundRect,
topLeft: 16.0,
backgroundColor: Colors.green,
)
设置气泡箭头位置
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ExcellentBubble(
child: Text(
'左上角',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
),
),
backgroundColor: Colors.deepOrange,
),
ExcellentBubble(
position: BubblePosition.leftCenter,
backgroundColor: Colors.deepOrange,
child: Text(
'左中角',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
),
),
),
ExcellentBubble(
position: BubblePosition.leftBottom,
backgroundColor: Colors.deepOrange,
child: Text(
'左下角',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
),
),
),
],
)
im_text_message
Im 文本消息组件，用于展示文本消息，可支持展示自定义的 emoji 表情，支持字数限制的展开/缩放按钮。
im_text_message 示例
普通文本消息
ImTextMessage(
content: '这是文本消息',
isMe: true,
)
设置消息来源并支持 emoji 表情
ImTextMessage(
content: '设置消息来源 [流泪]',
isMe: false,
)
设置长文本
ImTextMessage(
content: '这是一段长文本消息这是一段长文本消息这是一段长文本消息这是一段长文本消息这是一段长文本消息这是一段长文本消息这是一段长文本消息这是一段长文本消息这是一段长文本消息这是一段长文本消息这是一段长文本消息这是一段长文本消息这是一段长文本消息这是一段长文本消息这是一段长文本消息这是一段长文本消息',
isMe: true,
)
设置背景色和文本样式
ImTextMessage(
content: '设置背景色-设置文本样式',
isMe: true,
selfBackgroundColor: Colors.teal,
selfTextStyle: TextStyle(
color: Colors.yellowAccent,
fontWeight: FontWeight.bold,
)
)
设置圆角矩形气泡类型
ImTextMessage(
content: '设置「圆角矩形」气泡类型',
isMe: true,
bubbleType: BubbleType.RoundRect,
)
重建 expandBuilder
ImTextMessage(
content: '重建「展开」按钮重建「展开」按钮重建「展开」按钮重建「展开」按钮重建「展开」按钮',
isMe: true,
limit: 20,
expandBuilder: (BuildContext context, bool isExpanded) {
return Text( isExpanded ? '↑' : '↓', style: TextStyle(color: Colors.white,
fontSize: 16.0
),);
},
)
im_image_message
Im 图片组件，支持点击预览、下载和编辑功能。
im_image_message 示例
支持图片预览和编辑
支持视频预览和播放
const String kLink = "https://source.unsplash.com/1900x3600/?camera,paper";
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.all(kPadding),
child: ImImageMessage(
imageId: '5',
imageUrl: kLink,
),
),
Text(
'默认样式',
style: TextStyle(
color: Colors.black87,
),
),
Container(
padding: const EdgeInsets.all(kPadding),
child: ImImageMessage(
imageId: '5',
imageUrl: kLink,
thumbWidth: 120,
thumbHeight: 200,
galleryImages: galleryImages,
),
),
Text(
'根据预览图宽度设置宽高',
style: TextStyle(
color: Colors.black87,
),
),
Container(
padding: const EdgeInsets.all(kPadding),
child: ImImageMessage(
imageId: '5',
imageUrl: kLink,
fit: BoxFit.cover,
),
),
Text(
'预览图填充模式',
style: TextStyle(
color: Colors.black87,
),
)
],
)
PhotoViewRouteWrapper
图片预览页面级组件，支持下载、编辑和滑动等功能
PhotoEditorRouteWrapper
图片编辑器页面级组件，支持涂鸦、画笔粗细、画笔颜色选择等
VideoPlayerRouteWrapper
视频播放器页面级组件，支持拖动设置进度和下载功能
im_voice_message
Im 语音组件
const String kAudioLink = "https://www.runoob.com/try/demo_source/horse.mp3";
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 200,
padding: const EdgeInsets.all(kPadding),
child: ImVoiceMessage(
isMe: true,
duration: 145,
remoteUrl: kAudioLink,
),
),
Text(
'默认样式-我',
style: TextStyle(
color: Colors.black87,
),
),
Container(
width: 200,
padding: const EdgeInsets.all(kPadding),
child: ImVoiceMessage(
isMe: false,
duration: 145,
remoteUrl: kAudioLink,
),
),
Text(
'默认样式-对方',
style: TextStyle(
color: Colors.black87,
),
),
Container(
width: 200,
padding: const EdgeInsets.all(kPadding),
child: ImVoiceMessage(
isMe: false,
duration: 145,
remoteUrl: kAudioLink,
contentBuilder: (BuildContext context, AudioPlayer player) {
return Row(
children: [
Icon(Icons.record_voice_over_rounded),
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text(Tool.getElapsedTime(123),),
),
],
);
},
),
),
Text(
'自定义样式',
style: TextStyle(
color: Colors.black87,
),
),
],
)
im_conversation
Im 会话消息，支持设置头像形状和滑动删除功能等，提供默认头像
im_message
im_message 组件是对各种消息类型组件的封装，增加头像 + 消息和发送状态
im_sending_handler
Im 消息发送控件，支持语音、文本框、emoji 表情、图片、拍摄等功能
[注] 关于 emoji 表情包
需要把库 assets/emoji 和 assets/icon 目录下的文件加入项目中才能使用表情面板
其他
GalleryImageInfo
预览图类，用于 im_image_message 的预览图展示的数据
class GalleryImageInfo {
GalleryImageInfo({
required this.id,
required this.imageUrl,
this.videoUrl,
this.thumbWidth,
this.thumbHeight,
this.previewWidth,
this.previewHeight,
this.duration,
this.type,
});
String id;
String imageUrl;
String? videoUrl;
int? duration;
int? type;
double? thumbWidth;
double? thumbHeight;
double? previewWidth;
double? previewHeight;
}
PanelConfig
面板配置类，用于自定义 im_sending_handler 的控件组
class PanelConfig {
PanelConfig({
required this.id,
required this.title,
required this.icon,
this.callback,
});
String id;
String title;
IconData icon;
void Function(BuildContext context)? callback;
}
ImMessageType
Im 消息类型
class ImMessageType {
static const UnKnown = -2; /// 未知类型消息
static const Draft = -1; /// 草稿消息
static const System = 0; /// 系统消息
static const Text = 1; /// 文本消息
static const Voice = 2; /// 语音消息
static const Image = 3; /// 图片消息
static const Video = 4; /// 视频消息
static const VoiceCall = 5; /// 语音通话
static const VideoCall = 6; /// 视频通话
static const Time = 7; /// 时间消息
}
[注] 如何扩展消息类型
可以自定义一个 ImCustomMessageType，添加上述类的静态属性
ImMessageStatus
Im 消息发送状态
class ImMessageStatus {
static const Sending = 0; /// 发送中
static const SendSuccess = 1; /// 发送成功
static const SendFailed = 2; /// 发送失败
}
6 Jul 27, 2022
1 Mar 5, 2022
102 Dec 25, 2022
490 Jan 3, 2023
4 Jul 16, 2022
1 Oct 19, 2021
21 Dec 29, 2022
1.5k Jan 8, 2023
32 Aug 3, 2022
13 Dec 15, 2022