Flutter 是 Google 开源的 UI 框架，旨在帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。

相比较目前的混合开发方案，Flutter 提供了大量的文档，能非常快速且友好的让你加入到这个大家庭，针对移动端，Flutter 提供了符合 Android 风格的 Material 和符合 iOS 风格的 Cupertino，同时对不同平台也做了不同的兼容。比如 闲鱼，美团，腾讯 等大厂都有相关案例使用。

感兴趣的同学可以关注 GitHub：

项目简介

FlutterChat聊天室是基于flutter+dart等技术开发的仿微信手机端App聊天实例，实现消息发送/编辑器光标处插入表情，图片缩放预览，长按PopupWin菜单，视频/红包/朋友圈等功能。

视频加载中...

技术栈编码/技术：VS + Flutter 1.12.13/Dart 2.7.0图片/拍照：image_picker: ^0.6.6+1图片预览组件：photo_view: ^0.9.2视频组件：chewie: ^0.9.7存储组件：shared_preferences: ^0.5.7+1字体图标：阿里iconfont字体图标库flutter主入口main.dart页面配置

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导航切换BottomNavigationBar组件封装到tabbar页面底部tab是放在 Scaffold 的 bottomNavigationBar 中，顶部tab是放在 AppBar 的 bottom 中，也就是标题栏之下

bottomNavigationBar: BottomNavigationBar(	backgroundColor: GStyle.tabbarColor,	fixedColor: GStyle.primaryColor,	type: BottomNavigationBarType.fixed,	elevation: 1.0,	unselectedFontSize: 12.0,	selectedFontSize: 12.0,	currentIndex: _currentTabIndex,	items: [	  BottomNavigationBarItem(		icon: Stack(		  alignment: Alignment(6,-4),		  children: <Widget>[			GStyle.iconfont(0xe62a, size: 21.0),			GStyle.badge(13),		  ],		), 		title: Text('会话')	  ),	  BottomNavigationBarItem(		icon: GStyle.iconfont(0xe600, size: 21.0),		title: Text('通讯录')	  ),	  BottomNavigationBarItem(		icon: Stack(		  alignment: Alignment(1.5, -1.5),		  children: <Widget>[			GStyle.iconfont(0xe6b4, size: 21.0),			GStyle.badge(0, isdot: true),		  ],		),		title: Text('我')	  ),	],	onTap: (int index) {	  setState(() {		_currentTabIndex = index;	  });	},),

appBar: new AppBar(	...	///tabBar控件	bottom: new TabBar(		///顶部时，tabBar为可以滑动的模式		isScrollable: true,		///必须有的控制器，与pageView的控制器同步		controller: _tabController,		///每一个tab item，是一个List<Widget>		tabs: _tabItems,		///tab底部选中条颜色		indicatorColor: _indicatorColor,	),	...),

flutter使用阿里iconfont自定义图标

由于flutter自带图标不能满足项目需求，所以项目中使用的图标是阿里iconfont字体图标库

如上图：在pubspec.yaml里添加字体配置

Icon(IconData(0xe60e, fontFamily:'iconfont'), size:24.0)

IconData第一个参数是字体code，到这一步自定义字体图标就好了，每次都这样调用显得不优雅，只能作如下抽离封装。

IconData第一个参数是字体code

这样调用的时候只需传入字体code就行，支持自定义图标大小、颜色

GStyle.iconfont(0xe60e)GStyle.iconfont(0xe60e, color: Colors.orange, size: 21.0)

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        );    }}

默认背景色是红色、大小为18，数字超过99会以...显示。

GStyle.badge(0, isdot:true) //红点GStyle.badge(13) //默认数字13圆形GStyle.badge(68, color: Colors.orange, height: 15.0, width: 15.0) //默认数字68, 橘色 大小15

flutter弹窗自定义功能

flutter中提供了很丰富的弹窗组件 对话框AlertDialog、底部弹出框showModalBottomSheet、底部弱提示框SnackBar

flutter实现类似微信在长按位置弹出菜单

可通过flutter中InkWell组件提供的onTapDown获取长按坐标点，onLongPress长按事件弹出菜单

/** * @tpl 首页模板 */import 'package:flutter/material.dart';import '../../styles/common.dart';import '../../components/headerbar.dart';class IndexPage extends StatefulWidget {  @override  _IndexPageState createState() => _IndexPageState();}class _IndexPageState extends State<IndexPage> {	double _globalPositionX = 0.0; //点击位置的横坐标	double _globalPositionY = 0.0; //点击位置的纵坐标		@override	Widget build(BuildContext context) {		return Scaffold(			backgroundColor: GStyle.backgroundColor,			appBar: HeaderBar('Flutter聊天室'),			body: Container(				child: ListView(					children: <Widget>[						InkWell(							splashColor: Colors.grey[200],							child: Container(								...							),							onTap: () {...},							//获取长按坐标点							onTapDown: (TapDownDetails details) {								_globalPositionX = details.globalPosition.dx;								_globalPositionY = details.globalPosition.dy;							},							onLongPress: () {								_showPopupMenu(context);							},						),					],				),			),		);	}		// 弹出长按菜单	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,							left: isLeft ? _globalPositionX : _globalPositionX - 120,							width: 120,							child: Material(								shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(2.0)), //圆角								child: Column(									children: <Widget>[										...组件内容									],								),							),						)					],				);			}		);	}}

flutter对话框SimpleDialog，可以显示附加的提示和操作，通常配合SimpleDialogOption一起使用

/** * @tpl 通讯录页面 */import 'package:flutter/material.dart';import '../../styles/common.dart';import '../../components/headerbar.dart';class ContactPage extends StatelessWidget {	@override	Widget build(BuildContext context) {		return Scaffold(			backgroundColor: GStyle.backgroundColor,			appBar: HeaderBar('通讯录'),			body: DefaultTabController(				length: 2,				child: Scaffold(					appBar: TabBar(						tabs: <Widget>[							Tab(text: '好友列表'),Tab(text: '推荐好友'),						],						unselectedLabelColor: Colors.black54,						labelColor: GStyle.c_0091ea,						indicatorColor: GStyle.c_0091ea,						indicatorSize: TabBarIndicatorSize.label,					),					body: TabBarView(						children: <Widget>[							//tab1页面							Container(								child: ListView(									children: <Widget>[										InkWell(											splashColor: Colors.grey[200],											child: Container(												...											),											onTap: () {												Navigator.pushNamed(context, '/uinfo');											},											onLongPress: () {												_showSimplePopMenu(context);											},										),									],								),							),				  							//tab2页面							Container(								...							),						],					)				)			),		);	}  	void _showSimplePopMenu(BuildContext context) {		showDialog(			context: context,			builder: (context) {				return SimpleDialog(					// title: Text('标题'),					contentPadding: EdgeInsets.symmetric(vertical: 5.0),					elevation: 0,					children: <Widget>[						SimpleDialogOption(							child: Padding(padding: EdgeInsets.symmetric(vertical: 5.0), child: Text('添加备注')),							onPressed: () {},						),						...					],				);			}		);	}}

flutter底部面板showModalBottomSheet对话框,相当于弹出了一个新页面

/** * @tpl 好友信息页面 */import 'package:flutter/material.dart';import '../../styles/common.dart';import '../../components/headerbarNav.dart';class UinfoPage extends StatelessWidget {	@override	Widget build(BuildContext context) {		return Scaffold(			backgroundColor: GStyle.backgroundColor,			appBar: HeaderBarNav('',				leading: IconButton(icon: GStyle.iconfont(0xe65c, size: 17.0), onPressed: () {Navigator.pop(context);}),				actions: [					IconButton(icon: GStyle.iconfont(0xe93e, size: 17.0), onPressed: () {_showBottomSheet(context);}),				]			),			body: Container(				...			),		);	}		// 底部弹窗	void _showBottomSheet(BuildContext context) {		showModalBottomSheet(			context: context,			builder: (context) {				return Column(					mainAxisSize: MainAxisSize.min, //主轴方向占有空间的值，默认是max					children: <Widget>[						ListTile(							title: Row(          			mainAxisAlignment: MainAxisAlignment.center,           			children: <Widget>[Text('推荐给朋友', style: TextStyle(fontSize: 14))]        			),							onTap: () {},						),						...					],				);			},			// 圆角			shape: RoundedRectangleBorder(        	borderRadius: BorderRadius.only(topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0))      )		);	}}

flutter中AlertDialog对话框

在flutter中AlertDialog弹窗默认大小是固定的，如何去掉宽高限制？

通过SizedBox和无限制容器UnconstrainedBox组件配合实现，如下图宽度设置为260，高度是自适应

void _showCardPopup(BuildContext context) {    showDialog(		context: context,		builder: (context) {			return UnconstrainedBox(				constrainedAxis: Axis.vertical,				child: SizedBox(					width: 260,					child: AlertDialog(						content: Container(							...						),						elevation: 0,						contentPadding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 20.0),					),				),			);		}    );}

okay，到这里基于flutter/dart跨平台开发聊天室实例就介绍完了，希望能有些帮助！