为了账号安全,请及时绑定邮箱和手机立即绑定

Flutter/dart聊天实例|仿微信界面|红包|朋友圈

2020.05.13 17:45 5792浏览

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

http://img3.sycdn.imooc.com/5ebbbf8f0001827903750667.jpg

一、技术框架

  • 编码/技术: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字体图标库


http://img1.sycdn.imooc.com/5ebbc03d0001cab403750667.jpg

http://img2.sycdn.imooc.com/5ebbc03d0001cb0e03750667.jpg

http://img3.sycdn.imooc.com/5ebbc03e00012f8a03750667.jpg

http://img3.sycdn.imooc.com/5ebbc03d0001e41703750667.jpg

http://img1.sycdn.imooc.com/5ebbc03e00010bbb03750667.jpg

http://img1.sycdn.imooc.com/5ebbc03e000159a403750667.jpg

http://img1.sycdn.imooc.com/5ebbc03e00016aea03750667.jpg

http://img1.sycdn.imooc.com/5ebbc03e0001339d03750667.jpg

http://img2.sycdn.imooc.com/5ebbc03e000103a403750667.jpg

http://img1.sycdn.imooc.com/5ebbc03e0001f01903750667.jpg

鉴于flutter基于dart语言,需要安装Dart Sdk / Flutter Sdk,如何搭建开发环境,可以去官网查阅资料

https://flutter.cn/

https://flutterchina.club/

https://pub.flutter-io.cn/

https://www.dartcn.com/

flutter沉浸式状态栏/底部tabbar

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

https://segmentfault.com/a/1190000022483730

flutter图标组件/IconData自定义封装组件

  • 1、使用系统图标组件: Icon(Icons.search) 

  • 2、使用IconData方式: Icon(IconData(0xe60e, fontFamily:'iconfont'), size:24.0)

使用第二种方式需要先下载阿里图标库字体文件,然后在pubspec.yaml中引入字体

http://img1.sycdn.imooc.com/5ebbc0af0001d02c04620435.jpg

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红点/圆点提示

http://img1.sycdn.imooc.com/5ebbc0e400017f4d03620275.jpg

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就可实现。

http://img3.sycdn.imooc.com/5ebbc12f0001c02503820180.jpg

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

}


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消