flutter图片聊天泡泡_Flutter极致的业务封装——各类聊天气泡(一)

前言

真的有段时间没写博客了，因为过去的一段时间工作实在是太忙了😅，但忙也有忙的好处，在整个过程中自己的学习也非常快，在忙碌中充实自己，学习一些新的知识。因为刚刚实现了纯Flutter端的IM功能(太TM难了！🤣)在整个实现过程中，把自己对UI方面的一些理解写成blog。今天！给大家隆重介绍，我的气泡家庭🔮，就是你们看见的 微信里balbla~的聊天气泡了。

Show Time

朴实无华 —— 文字气泡 📒

首先就是比较normal，🐳 但又是最重要的，文字气泡，这个气泡，其实不需要太多功能，实用、简洁、准确，就能一把抓住人心，简单的说就是让用户觉得很舒服。先来看看我们的成品吧：

别问我为啥有圆角，因为我们的美工组是这么设计的，有人觉得好看有人觉得丑，但我感觉还可以吧。给大家介绍一下关键点吧，最关键的点就是我们如何控制气泡的宽度和高度，做到文字达到一定长度后自动换行呢 🤔？主角登场——ConstrainedBox,ConstrainedBox是怎样一个Widget呢？顾名思义ConstrainedBox可以给你的Widget加上一些限制，那可太棒了，我们要的效果换个思路其实就是限制气泡的最大宽度，但是我们不限制高度，对吧。所以我们的文字气泡就诞生了🚀

Widget textBubble(String content,Color colors,Color txtColor,double bottomleft,double bottomRight){

return ConstrainedBox(

constraints: BoxConstraints(

maxWidth: 500.w

),

child: Container(

margin: EdgeInsets.only(top: 10.h),

padding: EdgeInsets.symmetric(

horizontal: 34.w,

vertical: 18.h,

),

decoration: BoxDecoration(

borderRadius: BorderRadius.only(bottomLeft: Radius.circular(bottomleft), bottomRight: Radius.circular(bottomRight),topRight: Radius.circular(0.0),topLeft: Radius.circular(5.0)),

color: colors,

),

child: Text(content,style: TextStyle(color:txtColor,fontSize: 28.sp),),

),

);<