首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >自研新版Flutter3.32仿微信app聊天|朋友圈模板

自研新版Flutter3.32仿微信app聊天|朋友圈模板

原创
作者头像
andy2018
发布2025-07-12 09:57:32
发布2025-07-12 09:57:32
1530
举报
文章被收录于专栏:h5h5

2025新版跨平台flutter3.32+dart3.8从0-1搭建仿微信app界面聊天项目Flutter3Chat。

flutter3-chat包含聊天、通讯录、我的及朋友圈等模块。实现发送文字+表情消息、长按仿微信语音操作、图片/链接预览等功能。

运用技术

  • 编辑器: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自定义渐变导航条

代码语言:actionscript
复制
AppBar(
  title: Text('Flutter3-Chat'),
  flexibleSpace: Container(
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: [
          Color(0xFF0091EA), Color(0xFF07C160)
        ],
      )
    ),
  )
)

flutter3自定义下拉菜单

代码语言:actionscript
复制
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仿微信语音|按住说话

代码语言:actionscript
复制
// 语音
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;
      });
    },
  ),
)

基于uni-app+vue3实战短视频+聊天+直播app商城

基于uniapp+deepseek+vue3跨平台ai流式对话

electron35+deepseek桌面端ai模板

vue3.5+deepseek网页版ai流式对话

flutter3.27+getx仿抖音app短视频商城

Electron32桌面端os系统

electron31+vue3客户端聊天Exe实例

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 运用技术
  • 项目框架结构
  • flutter3自定义渐变导航条
  • flutter3自定义下拉菜单
  • flutter3仿微信语音|按住说话
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档