最新研发flutter3.32+dart3仿微信app聊天实例|Flutter3仿微信朋友圈

原创于 2025-07-11 22:35:23 发布 · 置顶 · 1.8k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#flutter3-chat #flutter3仿微信app #flutter3聊天室 #flutter3仿微信聊天 #flutter3朋友圈 #flutter3仿微信界面

flutter3+dart3 同时被 2 个专栏收录

26 篇文章

订阅专栏

flutter/dart实例

20 篇文章

订阅专栏

2025最新版Flutter3.32+Dart3.8跨平台仿微信app界面聊天室。

flutter3-wechat：原创基于flutter3.x+dart3.x+get_storage+photo_view仿微信App界面聊天系统。实现发送图文消息、gif大图、长按仿微信语音操作面板、图片预览、红包/朋友圈等功能。

在这里插入图片描述

使用技术

跨平台框架：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-wechat聊天项目已经更新到我的原创作品集。
flutter3.32+dart3.8跨平台仿微信聊天app应用

在这里插入图片描述

Flutter3自定义渐变导航栏

在这里插入图片描述
配置AppBar提供的可伸缩灵活区域属性flexibleSpace搭配gradient即可快速实现渐变导航栏。

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

Flutter3自定义PopupMenu下拉菜单

在这里插入图片描述

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仿微信朋友圈

在这里插入图片描述

/// 微信朋友圈九宫格图片
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(),
    );
  }
}