flutter 微信语言选择_Flutter/dart聊天实例|仿微信界面|红包|朋友圈

FlutterChatroom项目是基于flutter+dart+image_picker等技术实现的仿微信app聊天室实战项目。

一、技术框架编码/技术：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基于dart语言，需要安装Dart Sdk / Flutter Sdk，如何搭建开发环境，可以去官网查阅资料

flutter沉浸式状态栏/底部tabbar

flutter中如何实现顶部全背景沉浸式透明状态栏(去掉状态栏黑色半透明背景)，去掉右上角banner，可以去看这篇文章

flutter图标组件/IconData自定义封装组件1、使用系统图标组件： Icon(Icons.search)

2、使用IconData方式： 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,

);

}

}

调用非常简单，可自定义颜色、字体大小；

GStyle.iconfont(0xe635, color: Colors.orange, size: 17.0)

flutter实现badge红点/圆点提示

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

);

}

}

支持自定义红点大小、颜色，默认数字超过99就...显示；

GStyle.badge(0, isdot:true)

GStyle.badge(13)

GStyle.badge(29, color: Colors.orange, height: 15.0, width: 15.0)

flutter聊天页面功能在flutter中如何实现类似上图编辑器功能？通过TextField提供的多行文本框属性maxLines就可实现。

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属性提供的jumpTo方法及_msgController.position.maxScrollExtent

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

}