flutter/dart聊天实例|flutter仿微信

xiaoyan2015 · · 883 次点击 · 开始浏览    置顶
这是一个创建于 的主题,其中的信息可能已经有所发展或是发生改变。
> Flutter 是 Google 开源的 UI 框架,能高效构建多平台精美应用。 > [FlutterChat聊天室项目](https://juejin.im/post/5ebb5c49e51d454de828b0cd)是基于flutter+dart等技术开发的手机端App仿微信界面实例,实现编辑器光标处插入表情,图片预览,右键Popwin菜单,红包/朋友圈/视频等功能。 ![022360截图20200512003659242.png](https://static.studygolang.com/200514/827906466cce05a1c4decbede45eafb8.png) ### 技术框架 - 编码/技术: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项目结构/入口main.dart页面配置 ![360截图20200512115224384.png](https://static.studygolang.com/200514/90a01ce5119bd0c169e0e003de63d6d2.png) ``` /** * @tpl Flutter入口页面 | Q:282310962 */ import 'package:flutter/material.dart'; // 引入公共样式 import 'styles/common.dart'; // 引入底部Tabbar页面导航 import 'components/tabbar.dart'; // 引入地址路由 import 'router/routes.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter App', debugShowCheckedModeBanner: false, theme: ThemeData( primaryColor: GStyle.appbarColor, ), home: TabBarPage(), onGenerateRoute: onGenerateRoute, ); } } ``` ![001360截图20200512002407906.png](https://static.studygolang.com/200514/cab4d714c9ac14406e18860101b9838b.png) ![003360截图20200512002631530.png](https://static.studygolang.com/200514/e66ff71d094eb2bb3c9ba11b3ed7bbd6.png) ![004360截图20200512002755155.png](https://static.studygolang.com/200514/cb0ed421cfa1df31e6711d6519bac36c.png) ![005360截图20200512002840849.png](https://static.studygolang.com/200514/2f8aaed6681f7b93130024ef67591156.png) ![007360截图20200512002934978.png](https://static.studygolang.com/200514/03a47cff467cfb3f5c2745e57cbf0eb3.png) ![013360截图20200512003159188.png](https://static.studygolang.com/200514/59a4365e1c839b64576fe8b50c92b48a.png) ![018360截图20200512003422368.png](https://static.studygolang.com/200514/c65b9db43a67fa16918338eb3a0ae2da.png) ![023360截图20200512003901929.png](https://static.studygolang.com/200514/cb2b40a62a5df2879ae409073d4ea515.png) ![025360截图20200512004305675.png](https://static.studygolang.com/200514/1fe7e1d354b5f8938226547f77421ced.png) ![026360截图20200512004446202.png](https://static.studygolang.com/200514/fcad772937d270bf4f5305b5abe9ead2.png) ![029360截图20200512004708377.png](https://static.studygolang.com/200514/fb6e0a3c662663838ccf38d561a0864d.png) ![030360截图20200512005459533.png](https://static.studygolang.com/200514/adcfe69c2ad816b767fb8df2607feeb2.png) ### flutter顶部沉浸式状态条+底部tabbar 在flutter中如何实现顶部透明状态栏(去掉状态栏黑色半透明背景),去掉右上角banner,详细介绍可以去看这篇文章 [https://juejin.im/post/5ea659226fb9a03c85463f5c](https://juejin.im/post/5ea659226fb9a03c85463f5c) ### flutter图标组件/自定义图标 flutter中自带图标使用非常简单 Icon(Icons.search) 可是如果想要自定义图标,如使用阿里图标iconfont如何实现,这时就需要用到IconData来实现自定义图标了。Icon(IconData(0xe60e, fontFamily:'iconfont'), size:24.0) 使用IconData需要先下载阿里图标库字体文件,然后在pubspec.yaml中引入字体 ![](https://image-static.segmentfault.com/121/524/1215240957-5ebb488c75980_articlex) ``` class GStyle { // __ 自定义图标 static iconfont(int codePoint, {double size = 16.0, Color color}) { return Icon( IconData(codePoint, fontFamily: 'iconfont', matchTextDirection: true), size: size, color: color, ); } } ``` ### flutter实现红点提示|未读信息数字圆点 类似如下红点提醒很常见,平时微信中就有见到,可以flutter没有提供这种组件,只能自定义实现 ![](https://image-static.segmentfault.com/756/150/756150019-5ebb4964b6ea4_articlex) ``` 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 ); } } ``` ### flutter实现长按菜单 flutter中长按位置弹出菜单,需要通过InkWell组件提供的onTapDown事件获取长按坐标点 ![](https://image-static.segmentfault.com/345/286/3452864693-5ebb4b4314954_articlex) ``` InkWell( splashColor: Colors.grey[200], child: Container(...), onTapDown: (TapDownDetails details) { _globalPositionX = details.globalPosition.dx; _globalPositionY = details.globalPosition.dy; }, onLongPress: () { _showPopupMenu(context); }, ), ``` ``` // 长按弹窗 double _globalPositionX = 0.0; //长按位置的横坐标 double _globalPositionY = 0.0; //长按位置的纵坐标 void _showPopupMenu(BuildContext context) { // 确定点击位置在左侧还是右侧 bool isLeft = _globalPositionX > MediaQuery.of(context).size.width/2 ? false : true; // 确定点击位置在上半屏幕还是下半屏幕 bool isTop = _globalPositionY > MediaQuery.of(context).size.height/2 ? false : true; showDialog( context: context, builder: (context) { return Stack( children: <Widget>[ Positioned( top: isTop ? _globalPositionY : _globalPositionY - 200.0, left: isLeft ? _globalPositionX : _globalPositionX - 120.0, width: 120.0, child: Material( ... ), ) ], ); } ); } ``` 好了,基于flutter+dart开发聊天室项目就介绍到这里,希望能喜欢~~~ ![](https://user-gold-cdn.xitu.io/2020/5/13/1720c062e9c8af36)

有疑问加站长微信联系(非本文作者)

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:701969077

883 次点击  
加入收藏 微博
1 回复  |  直到 2020-05-18 12:30:50
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传