鉴于Flutter最近比较火，今天给大家分享的是基于flutter+dart全家桶技术开发的仿微信界面聊天FlutterChat项目实例。实现了消息+表情、图片预览、红包、长按菜单、视频/仿朋友圈等功能。
技术框架
编码/技术：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，详细介绍可以去看这篇文章
Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航
flutter自定义图标组件
flutter中如果系统图标不能满足项目要求，只能自定义实现，使用阿里iconfont字体图标；
Icon(IconData(0xe60e, fontFamily:'iconfont'), size:24.0)
先下载阿里图标库字体文件，然后在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实现微信未读消息圆点提示 | 未读消息小红点
在app中，类似如下红点提醒很常见，平时微信中就有见到，可以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中TextField文本框提供的maxLines属性可实现多行/换行文本，不过默认会有个高度，可在外层加个容器限制最小高度，然后设置 maxLines: null、keyboardType: TextInputType.multiline
Container(
margin: GStyle.margin(10.0),
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(3.0)),
constraints: BoxConstraints(minHeight: 30.0, maxHeight: 150.0),
child: TextField(
maxLines: null,
keyboardType: TextInputType.multiline,
decoration: InputDecoration(
hintStyle: TextStyle(fontSize: 14.0),
isDense: true,
contentPadding: EdgeInsets.all(5.0),
border: OutlineInputBorder(borderSide: BorderSide.none)
),
controller: _textEditingController,
focusNode: _focusNode,
onChanged: (val) {
setState(() {
editorLastCursor = _textEditingController.selection.baseOffset;
});
},
onTap: () {handleEditorTaped();},
),
),
flutter可以通过ListView里的controller控制器实现滚动聊天消息到最底部
ScrollController _msgController = new ScrollController();
...
ListView(
controller: _msgController,
padding: EdgeInsets.all(10.0),
children: renderMsgTpl(),
)
// 滚动消息至聊天底部
void scrollMsgBottom() {
timer = Timer(Duration(milliseconds: 100), () => _msgController.jumpTo(_msgController.position.maxScrollExtent));
}
作者：xiaoyan
链接：https://juejin.im/post/5ebb5c49e51d454de828b0cd
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
如果觉得《flutter图片聊天泡泡_flutter即时聊天IM仿微信|flutter聊天界面》对你有帮助，请点赞、收藏，并留下你的观点哦！
