flutter图片聊天泡泡_flutter/dart聊天实例|flutter仿微信

> Flutter 是 Google 开源的 UI 框架,能高效构建多平台精美应用。

> [FlutterChat聊天室项目](https://juejin.im/post/5ebb5c49e51d454de828b0cd)是基于flutter+dart等技术开发的手机端App仿微信界面实例，实现编辑器光标处插入表情，图片预览，右键Popwin菜单，红包/朋友圈/视频等功能。


### 技术框架

- 编码/技术：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页面配置


```

/**

* @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,

);

}

}

```













### 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中引入字体


```

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没有提供这种组件，只能自定义实现


```

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事件获取长按坐标点


```

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: [

Positioned(

top: isTop ? _globalPositionY : _globalPositionY - 200.0,

left: isLeft ? _globalPositionX : _globalPositionX - 120.0,

width: 120.0,

child: Material(

...

),

)

],

);

}

);

}

```

好了，基于flutter+dart开发聊天室项目就介绍到这里，希望能喜欢~~~