2025最新研发flutter3.32+dart3.8+get_storage+photo_view搭建跨平台仿微信app界面聊天系统。实现发送文字+emo消息、长按仿微信语音操作、图片/链接预览等功能。
使用技术
- 编辑器：vscode
- 框架技术：flutter3.32+dart3.8
- 组件库：material-design3
- 弹窗组件：showDialog/SimpleDialog/showModalBottomSheet/AlertDialog
- 图片预览：photo_view^0.15.0
- 存储组件：get_storage^2.1.1
- 下拉刷新：easy_refresh^3.4.0
- toast提示：toast^0.3.0
- 网址预览组件：url_launcher^6.3.1
flutter3-chat实现了类似微信朋友圈功能。
项目结构目录
flutter3实现沉浸式渐变状态栏导航条
根据AppBar 提供的可伸缩灵活区域属性 flexibleSpace 搭配 gradient 实现自定义渐变导航栏。
ts
AppBar(
title: Text('Flutter3-Chat'),
flexibleSpace: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFF0091EA), Color(0xFF07C160)
],
)
),
)
)
flutter3自定义微信下拉菜单
使用 PopupMenuButton 组件实现下拉菜单功能。
ts
PopupMenuButton(
icon: FStyle.iconfont(0xe62d, size: 17.0),
offset: const Offset(0, 50.0),
tooltip: '',
color: const Color(0xFF353535),
itemBuilder: (BuildContext context) {
return <PopupMenuItem>[
popupMenuItem(0xe666, '发起群聊', 0),
popupMenuItem(0xe75c, '添加朋友', 1),
popupMenuItem(0xe603, '扫一扫', 2),
popupMenuItem(0xe6ab, '收付款', 3),
];
},
onSelected: (value) {
switch(value) {
case 0:
print('发起群聊');
break;
case 1:
Navigator.pushNamed(context, '/addfriends');
break;
case 2:
print('扫一扫');
break;
case 3:
print('收付款');
break;
}
},
)
flutter3仿微信朋友圈
ts
ImageGroup(images: item['images'])
ImageGroup(
images: uploadList,
album: true,
onChoose: () async {
Toast.show('选择手机相册图片', duration: 2, gravity: 1);
},
)
ts
/// 微信朋友圈九宫格图片
library;
import 'package:flutter/material.dart';
import '../router/fade_route.dart';
import 'image_viewer.dart';
import '../utils/index.dart';
class ImageGroup extends StatelessWidget {
const ImageGroup({
super.key,
this.images,
this.width = 200.0,
this.album = false,
this.limit = 9,
this.onChoose,
});
final List<String>? images; // 图片组
final double width; // 图片宽度
final bool album; // 是否相册/专辑(最后面显示+可选择图片)
final int limit; // 限制多少张
final Function? onChoose; // 选择图片回调
int? get count => images?.length;
List<String>? get imgList => count! >= limit ? images?.sublist(0, limit) : images;
// 创建可点击预览图片
createImage(BuildContext context, String img, int key) {
return GestureDetector(
child: Hero(
tag: 'image_${key}_$img', // 放大缩小动画效果标识
child: img == '+' ?
Container(color: Colors.transparent, child: const Icon(Icons.add, size: 30.0, color: Colors.black45),)
:
Utils.isUrl(img) ?
Image.network(
img,
width: width,
fit: BoxFit.contain,
)
:
Image.asset(
img,
width: width,
fit: BoxFit.contain,
),
),
onTap: () {
// 选择图片
if(img == '+') {
onChoose!();
}else {
Navigator.of(context).push(FadeRoute(route: ImageViewer(
images: album ? imgList!.sublist(0, imgList!.length - 1) : imgList,
index: key,
heroTags: imgList!.asMap().entries.map((e) => 'image_${e.key}_${e.value}').toList(),
)));
}
},
);
}
@override
Widget build(BuildContext context){
// 一张图片
if(count == 1 && !album) {
return SizedBox(
width: width,
child: createImage(context, imgList![0], 0),
);
}
if(album && count! < limit) {
imgList?.add('+');
}
// 多张图片
return GridView(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
// 横轴元素个数
crossAxisCount: 3,
// 纵轴间距
mainAxisSpacing: 5.0,
// 横轴间距
crossAxisSpacing: 5.0,
// 子组件宽高比例
childAspectRatio: 1,
),
children: imgList!.asMap().entries.map((e) {
return Container(
color: Colors.grey[100],
child: createImage(context, e.value, e.key),
);
}).toList(),
);
}
}flutter3实现微信按住说话|语音功能
ts
// 语音
Offstage(
offstage: !voiceBtnEnable,
child: GestureDetector(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
),
alignment: Alignment.center,
height: 40.0,
width: double.infinity,
child: Text(voiceTypeMap[voiceType], style: const TextStyle(fontSize: 15.0),),
),
onPanStart: (details) {
setState(() {
voiceType = 1;
voicePanelEnable = true;
});
},
onPanUpdate: (details) {
Offset pos = details.globalPosition;
double swipeY = MediaQuery.of(context).size.height - 120;
double swipeX = MediaQuery.of(context).size.width / 2 + 50;
setState(() {
if(pos.dy >= swipeY) {
voiceType = 1; // 松开发送
}else if (pos.dy < swipeY && pos.dx < swipeX) {
voiceType = 2; // 左滑松开取消
}else if (pos.dy < swipeY && pos.dx >= swipeX) {
voiceType = 3; // 右滑语音转文字
}
});
},
onPanEnd: (details) {
// print('停止录音');
setState(() {
switch(voiceType) {
case 1:
Toast.show('发送录音文件', duration: 1, gravity: 1);
voicePanelEnable = false;
break;
case 2:
Toast.show('取消发送', duration: 1, gravity: 1);
voicePanelEnable = false;
break;
case 3:
Toast.show('语音转文字', duration: 1, gravity: 1);
voicePanelEnable = true;
voiceToTransfer = true;
break;
}
voiceType = 0;
});
},
),
)综上就是flutter3实战仿微信app聊天实例的一些分享，感谢大家的阅读与支持！
基于uniapp+vue3+uvue短视频+聊天+直播app系统
基于uniapp+vue3+deepseek+markdown搭建app版流式输出AI模板
vue3.5+deepseek+arco+markdown搭建web版流式输出AI模板
vue3仿Deepseek/ChatGPT流式聊天AI界面，对接deepseek/OpenAI API
基于tauri2.0+vue3.5+deepseek+arco搭建wins版流式输出AI系统
原创electron31+vite5.x+elementPlus桌面端后台管理系统
自研tauri2.0+vite6.x+vue3+rust+arco-design桌面版os管理系统Tauri2-ViteOS