flutter图片聊天泡泡_Flutter 非常丰富的消息气泡效果合集

最新推荐文章于 2023-07-18 04:33:57 发布
最新推荐文章于 2023-07-18 04:33:57 发布
阅读量904 收藏
点赞数
文章标签： flutter图片聊天泡泡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39653622/article/details/111794915
版权
本文介绍如何在 Flutter 中创建丰富多样的消息气泡效果，适用于社交应用的聊天气泡或其他长按弹出场景。文章通过示例代码详细展示了 BubbleWidget 的封装，包括气泡的形状、尖角位置、大小、颜色等属性的定制，并提供了多种使用示例。
摘要由CSDN通过智能技术生成

这个消息气泡可以用于社交的聊天气泡，或者其他长按弹出的效果，

应用场景挺多，主要是用于学习。

先上效果图

1.BubbleWidget封装

通过系统的Canvas绘制

/// 气泡组件封装

///

/// created by hujintao

/// created at 2019-10-21

//

import 'dart:math';

import 'package:flutter/material.dart';

enum BubbleArrowDirection { top, bottom, right, left, topLeft }

class BubbleWidget extends StatelessWidget {

// 尖角位置

final position;

// 尖角高度

var arrHeight;

// 尖角角度

var arrAngle;

// 圆角半径

var radius;

// 宽度

final width;

// 高度

final height;

// 边距

double length;

// 颜色

Color color;

// 边框颜色

Color borderColor;

// 边框宽度

final strokeWidth;

// 填充样式

final style;

// 子 Widget

final child;

// 子 Widget 与起泡间距

var innerPadding;

BubbleWidget(

this.width,

this.height,

this.color,

this.position, {

Key key,

this.length = 1,

this.arrHeight = 12.0,

this.arrAngle = 60.0,

this.radius = 10.0,

this.strokeWidth = 4.0,

this.style = PaintingStyle.fill,

this.borderColor,

this.child,

this.innerPadding = 6.0,

}) : super(key: key);

@override

Widget build(BuildContext context) {

if (style == PaintingStyle.stroke && borderColor == null) {

borderColor = color;

}

if (arrAngle < 0.0 || arrAngle >= 180.0) {

arrAngle = 60.0;

}

if (arrHeight < 0.0) {

arrHeight = 0.0;

}

if (radius < 0.0 || radius > width * 0.5 || radius > height * 0.5) {

radius = 0.0;

}

if (position == BubbleArrowDirection.top ||

position == BubbleArrowDirection.bottom) {

if (length < 0.0 || length >= width - 2 * radius) {

length = width * 0.5 - arrHeight * tan(_angle(arrAngle * 0.5)) - radius;

}

} else {

if (length < 0.0 || length >= height - 2 * radius) {

length =

height * 0.5 - arrHeight * tan(_angle(arrAngle * 0.5)) - radius;

}

}

if (innerPadding < 0.0 ||

innerPadding >= width * 0.5 ||

innerPadding >= height * 0.5) {

innerPadding = 2.0;

}

Widget bubbleWidget;

if (style == PaintingStyle.fill) {

bubbleWidget = Container(

width: width,

height: height,

child: Stack(children: [

CustomPaint(

painter: BubbleCanvas(context, width, height, color, position,

arrHeight, arrAngle, radius, strokeWidth, style, length)),

_paddingWidget()

]));

} else {

bubbleWidget = Container(

width: width,

height: height,

child: Stack(children: [

CustomPaint(

painter: BubbleCanvas(

context,

width,

height,

color,

position,

arrHeight,

arrAngle,

radius,

strokeWidth,

PaintingStyle.fill,

length)),

CustomPaint(

painter: BubbleCanvas(

context,

width,

height,

borderColor,

position,

arrHeight,

arrAngle,

radius,

strokeWidth,

style,

length)),

_paddingWidget()

]));

}

return bubbleWidget;

}

Widget _paddingWidget() {

return Padding(

padding: EdgeInsets.only(

top: (position == BubbleArrowDirection.top)

? arrHeight + innerPadding

: innerPadding,

right: (position == BubbleArrowDirection.right)

? arrHeight + innerPadding

: innerPadding,

bottom: (position == BubbleArrowDirection.bottom)

? arrHeight + innerPadding

: innerPadding,

left: (position == BubbleArrowDirection.left)

? arrHeight + innerPadding

: innerPadding),

child: Center(child: this.child));

}

}

class BubbleCanvas extends CustomPainter {

BuildContext context;

final position;

final arrHeight;

final arrAngle;

final radius;

final width;

final height;

final length;

final color;

final strokeWidth;

final style;

BubbleCanvas(

this.context,

this.width,

this.height,

this.color,

this.position,

this.arrHeight,

this.arrAngle,

this.radius,

this.strokeWidth,

this.style,

this.length);

@override

void paint(Canvas canvas, Size size) {

Path path = Path();

path.arcTo(

Rect.fromCircle(

center: Offset(

(position == BubbleArrowDirection.left)

? radius + arrHeight

: radius,

(position == BubbleArrowDirection.top)

? radius + arrHeight

: radius),

radius: radius),

pi,

pi * 0.5,

false);

if (position == BubbleArrowDirection.top) {

path.lineTo(length + radius, arrHeight);

path.lineTo(

length + radius + arrHeight * tan(_angle(arrAngle * 0.5)), 0.0);

path.lineTo(length + radius + arrHeight * tan(_angle(arrAngle * 0.5)) * 2,

arrHeight);

}

path.lineTo(

(position == BubbleArrowDirection.right)

? width - radius - arrHeight

: width - radius,

(position == BubbleArrowDirection.top) ? arrHeight : 0.0);

path.arcTo(

Rect.fromCircle(

center: Offset(

(position == BubbleArrowDirection.right)

? width - radius - arrHeight

: width - radius,

(position == BubbleArrowDirection.top)

? radius + arrHeight

: radius),

radius: radius),

-pi * 0.5,

pi * 0.5,

false);

if (position == BubbleArrowDirection.right) {

path.lineTo(width - arrHeight, length + radius);

path.lineTo(

width, length + radius + arrHeight * tan(_angle(arrAngle * 0.5)));

path.lineTo(width - arrHeight,

length + radius + arrHeight * tan(_angle(arrAngle * 0.5)) * 2);

}

path.lineTo(

(position == BubbleArrowDirection.right) ? width - arrHeight : width,

(position == BubbleArrowDirection.bottom)

? height - radius - arrHeight

: height - radius);

path.arcTo(

Rect.fromCircle(

center: Offset(

(position == BubbleArrowDirection.right)

? width - radius - arrHeight

: width - radius,

(position == BubbleArrowDirection.bottom)

? height - radius - arrHeight

: height - radius),

radius: radius),

pi * 0,

pi * 0.5,

false);

if (position == BubbleArrowDirection.bottom) {

path.lineTo(width - radius - length, height - arrHeight);

path.lineTo(

width - radius - length - arrHeight * tan(_angle(arrAngle * 0.5)),

height);

path.lineTo(

width - radius - length - arrHeight * tan(_angle(arrAngle * 0.5)) * 2,

height - arrHeight);

}

path.lineTo(

(position == BubbleArrowDirection.left) ? radius + arrHeight : radius,

(position == BubbleArrowDirection.bottom)

? height - arrHeight

: height);

path.arcTo(

Rect.fromCircle(

center: Offset(

(position == BubbleArrowDirection.left)

? radius + arrHeight

: radius,

(position == BubbleArrowDirection.bottom)

? height - radius - arrHeight

: height - radius),

radius: radius),

pi * 0.5,

pi * 0.5,

false);

if (position == BubbleArrowDirection.left) {

path.lineTo(arrHeight, height - radius - length);

path.lineTo(0.0,

height - radius - length - arrHeight * tan(_angle(arrAngle * 0.5)));

path.lineTo(

arrHeight,

height -

radius -

length -

arrHeight * tan(_angle(arrAngle * 0.5)) * 2);

}

path.lineTo((position == BubbleArrowDirection.left) ? arrHeight : 0.0,

(position == BubbleArrowDirection.top) ? radius + arrHeight : radius);

path.close();

canvas.drawPath(

path,

Paint()

..color = color

..style = style

..strokeCap = StrokeCap.round

..strokeWidth = strokeWidth);

}

@override

bool shouldRepaint(CustomPainter oldDelegate) {

return true;

}

}

double _angle(angle) {

return angle * pi / 180;

}

2.气泡组件使用

注意事项

必填参数

宽度 ScreenUtil().setWidth(326),

高度 ScreenUtil().setWidth(64),

背景颜色 Color(0xff333333),

位置 BubbleArrowDirection.bottom

可选参数

箭头宽度 length: ScreenUtil().setWidth(20)

箭头高度 arrHeight : ScreenUtil().setWidth(12)

箭头读书 arrAngle: 75.0,

子Widget与起泡间距 innerPadding

import 'package:flutter/material.dart';

import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'package:fpdxapp/components/bubble/bubble_widget.dart';

class BubblePage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

body: ListView(children: [

SizedBox(

height: 20,

),

///1- 复制删除,撤回消息-气泡BottomRight

Padding(

padding: EdgeInsets.all(4.0),

child: BubbleWidget(

ScreenUtil().setWidth(326),

ScreenUtil().setWidth(64),

Color(0xff333333),

BubbleArrowDirection.bottom,

length: ScreenUtil().setWidth(20),

child: Row(

mainAxisSize: MainAxisSize.max,

children: [

// 复制按钮

GestureDetector(

onTap: () {},

child: Container(

child: Center(

child: Text(

'复制',

style: TextStyle(

color: Color(0xffE4E4E4),

fontSize: ScreenUtil().setSp(20)),

),

),

width: ScreenUtil().setWidth(108),

height: ScreenUtil().setWidth(64),

),

),

// line

Container(

width: ScreenUtil().setWidth(1),

color: Color(0xff707070)),

// 删除按钮

GestureDetector(

onTap: () {},

child: Container(

child: Center(

child: Text(

'删除',

style: TextStyle(

color: Color(0xffE4E4E4),

fontSize: ScreenUtil().setSp(20)),

),

),

width: ScreenUtil().setWidth(108),

height: ScreenUtil().setWidth(64),

),

),

// line

Container(

width: ScreenUtil().setWidth(1),

color: Color(0xff707070)),

// 撤回按钮

GestureDetector(

onTap: () {},

child: Container(

child: Center(

child: Text(

'撤回',

style: TextStyle(

color: Color(0xffE4E4E4),

fontSize: ScreenUtil().setSp(20)),

),

),

width: ScreenUtil().setWidth(108),

height: ScreenUtil().setWidth(64),

),

),

],

),

arrHeight: ScreenUtil().setWidth(12),

arrAngle: 75.0,

innerPadding: 0.0,

)),

SizedBox(

height: 5,

),

///2- 复制删除,撤回消息-气泡BottomLeft

Padding(

padding: EdgeInsets.all(4.0),

child: BubbleWidget(

ScreenUtil().setWidth(326),

ScreenUtil().setWidth(64),

Color(0xff333333),

BubbleArrowDirection.bottom,

length: ScreenUtil().setWidth(250),

child: Row(

mainAxisSize: MainAxisSize.max,

children: [

// 复制按钮

GestureDetector(

onTap: () {},

child: Container(

child: Center(

child: Text(

'复制',

style: TextStyle(

color: Color(0xffE4E4E4),

fontSize: ScreenUtil().setSp(20)),

),

),

width: ScreenUtil().setWidth(108),

height: ScreenUtil().setWidth(64),

),

),

// line

Container(

width: ScreenUtil().setWidth(1), color: Color(0xff707070)),

// 删除按钮

GestureDetector(

onTap: () {},

child: Container(

child: Center(

child: Text(

'删除',

style: TextStyle(

color: Color(0xffE4E4E4),

fontSize: ScreenUtil().setSp(20)),

),

),

width: ScreenUtil().setWidth(108),

height: ScreenUtil().setWidth(64),

),

),

// line

Container(

width: ScreenUtil().setWidth(1), color: Color(0xff707070)),

// 撤回按钮

GestureDetector(

onTap: () {},

child: Container(

child: Center(

child: Text(

'撤回',

style: TextStyle(

color: Color(0xffE4E4E4),

fontSize: ScreenUtil().setSp(20)),

),

),

width: ScreenUtil().setWidth(108),

height: ScreenUtil().setWidth(64),

),

),

],

),

arrHeight: ScreenUtil().setWidth(12),

arrAngle: 75.0,

innerPadding: 0.0,

),

),

SizedBox(

height: 5,

),

///3- 复制删除,撤回消息-气泡TopLeft

Padding(

padding: EdgeInsets.all(4.0),

child: BubbleWidget(

ScreenUtil().setWidth(326),

ScreenUtil().setWidth(64),

Color(0xff333333),

BubbleArrowDirection.top,

length: ScreenUtil().setWidth(20),

child: Row(

mainAxisSize: MainAxisSize.max,

children: [

// 复制按钮

GestureDetector(

onTap: () {},

child: Container(

child: Center(

child: Text(

'复制',

style: TextStyle(

color: Color(0xffE4E4E4),

fontSize: ScreenUtil().setSp(20)),

),

),

width: ScreenUtil().setWidth(108),

height: ScreenUtil().setWidth(64),

),

),

// line

Container(

width: ScreenUtil().setWidth(1),

color: Color(0xff707070)),

// 删除按钮

GestureDetector(

onTap: () {},

child: Container(

child: Center(

child: Text(

'删除',

style: TextStyle(

color: Color(0xffE4E4E4),

fontSize: ScreenUtil().setSp(20)),

),

),

width: ScreenUtil().setWidth(108),

height: ScreenUtil().setWidth(64),

),

),

// line

Container(

width: ScreenUtil().setWidth(1),

color: Color(0xff707070)),

// 撤回按钮

GestureDetector(

onTap: () {},

child: Container(

child: Center(

child: Text(

'撤回',

style: TextStyle(

color: Color(0xffE4E4E4),

fontSize: ScreenUtil().setSp(20)),

),

),

width: ScreenUtil().setWidth(108),

height: ScreenUtil().setWidth(64),

),

),

],

),

arrHeight: ScreenUtil().setWidth(12),

arrAngle: 75.0,

innerPadding: 0.0,

)),

SizedBox(

height: 5,

),

///4- 复制删除,撤回消息-气泡TopRight

Padding(

padding: EdgeInsets.all(4.0),

child: BubbleWidget(

ScreenUtil().setWidth(326),

ScreenUtil().setWidth(64),

Color(0xff333333),

BubbleArrowDirection.top,

length: ScreenUtil().setWidth(250),

child: Row(

mainAxisSize: MainAxisSize.max,

children: [

// 复制按钮

GestureDetector(

onTap: () {},

child: Container(

child: Center(

child: Text(

'复制',

style: TextStyle(

color: Color(0xffE4E4E4),

fontSize: ScreenUtil().setSp(20)),

),

),

width: ScreenUtil().setWidth(108),

height: ScreenUtil().setWidth(64),

),

),

// line

Container(

width: ScreenUtil().setWidth(1), color: Color(0xff707070)),

// 删除按钮

GestureDetector(

onTap: () {},

child: Container(

child: Center(

child: Text(

'删除',

style: TextStyle(

color: Color(0xffE4E4E4),

fontSize: ScreenUtil().setSp(20)),

),

),

width: ScreenUtil().setWidth(108),

height: ScreenUtil().setWidth(64),

),

),

// line

Container(

width: ScreenUtil().setWidth(1), color: Color(0xff707070)),

// 撤回按钮

GestureDetector(

onTap: () {},

child: Container(

child: Center(

child: Text(

'撤回',

style: TextStyle(

color: Color(0xffE4E4E4),

fontSize: ScreenUtil().setSp(20)),

),

),

width: ScreenUtil().setWidth(108),

height: ScreenUtil().setWidth(64),

),

),

],

),

arrHeight: ScreenUtil().setWidth(12),

arrAngle: 75.0,

innerPadding: 0.0,

),

),

SizedBox(

height: 5,

),

// 气泡右

Padding(

padding: EdgeInsets.all(4.0),

child: Container(

alignment: Alignment.centerRight,

child: BubbleWidget(200.0, 40.0, Colors.blue.withOpacity(0.7),

BubbleArrowDirection.right,

child: Text('你好，我是BubbleWidget！',

style:

TextStyle(color: Colors.white, fontSize: 14.0))))),

Padding(

padding: EdgeInsets.all(4.0),

child: Container(

alignment: Alignment.bottomLeft,

child: BubbleWidget(300.0, 40.0, Colors.red.withOpacity(0.7),

BubbleArrowDirection.top,

length: 20,

child: Text('你好，你有什么特性化？',

style:

TextStyle(color: Colors.white, fontSize: 14.0))))),

Padding(

padding: EdgeInsets.all(4.0),

child: Container(

alignment: Alignment.centerRight,

child: BubbleWidget(300.0, 90.0, Colors.blue.withOpacity(0.7),

BubbleArrowDirection.right,

child: Text('我可以自定义：\n尖角方向，尖角高度，尖角角度，\n距圆角位置，圆角大小，边框样式等！',

style:

TextStyle(color: Colors.white, fontSize: 16.0))))),

Padding(

padding: EdgeInsets.all(4.0),

child: Container(

alignment: Alignment.centerLeft,

child: BubbleWidget(140.0, 40.0, Colors.cyan.withOpacity(0.7),

BubbleArrowDirection.left,

child: Text('你有什么不足？',

style:

TextStyle(color: Colors.white, fontSize: 14.0))))),

Padding(

padding: EdgeInsets.all(4.0),

child: Container(

alignment: Alignment.centerRight,

child: BubbleWidget(350.0, 60.0, Colors.green.withOpacity(0.7),

BubbleArrowDirection.right,

child: Text('我现在还不会动态计算高度，只可用作背景！',

style:

TextStyle(color: Colors.white, fontSize: 16.0))))),

Padding(

padding: EdgeInsets.all(4.0),

child: Container(

alignment: Alignment.centerLeft,

child: BubbleWidget(

105.0,

60.0,

Colors.deepOrange.withOpacity(0.7),

BubbleArrowDirection.left,

child: Text('继续加油！',

style:

TextStyle(color: Colors.white, fontSize: 16.0))))),

]),

appBar: AppBar(

centerTitle: true,

leading: GestureDetector(

child: Icon(Icons.arrow_back_ios,

size: 20, color: Color(0xff333333)),

onTap: () {

Navigator.of(context).maybePop();

},

),

title: Text(

'气泡合集',

style: TextStyle(color: Colors.black),

),

),

);

}

}

作者：StevenHu

分享到：更多

weixin_39653622
关注
flutter 布局裁剪及实现微信聊天消息气泡组件
智玲君
01-18 991
1，ClipRect 矩形裁剪（结合Align快捷实现按区域裁剪） 构造方法下： const ClipRect({ Key key, this.clipper, // 定义裁剪规则，如果不指定，则裁剪区域为 child 指定的大小，即无任何裁剪效果 this.clipBehavior = Clip.hardEdge, // 裁剪方式，默认为 hardEdge Widget child }) clipBehavior参数对应的裁剪方式有以下四种： none：不裁剪 ha
Flutter 自定义聊天气泡
会煮咖啡的猫咪
07-13 710
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-frjkn3p5-1626132866799)(https://ducafecat.tech/2021/07/13/translation/custom-chat-bubble-in-flutter/2021-07-13-07-26-06.png)] 老铁记得 转发 ，猫哥会呈现更多 Flutter 好文~~~~ 微信群 ducafecat b 站 https://space.bilibili.com/404904528 原文
bubble:Flutter的讲话泡泡
05-06
气泡 Flutter小部件，用于聊天，就像Whatsapp和其他应用程序中的气泡一样。 例子 参见。 用法 Bubble ( child : Text ( 'Hello, World!' ), ), • 颜色 Bubble ( color : Color . fromRGBO ( 212 , 234 , 244 , 1.0 ), child : Text ( 'TODAY' , textAlign : TextAlign .center, style : TextStyle (fontSize : 11.0 )), ), Bubble ( margin : BubbleEdges . only (top : 10 ), color : Color . fromRGBO ( 225 , 255 , 199 , 1.0 ), child : Text ( 'Hello
Flutter学习日记之centerSlice实现.9图聊天气泡
qq_40785165的博客
09-05 3537
本文地址：https://blog.csdn.net/qq_40785165/article/details/119082024，转载需附上此链接 学而不化，非学也。 大家好，我是小黑，一个还没秃头的程序员~~~ 最近想做一个Flutter版的简易聊天交友软件，可以当成是自己的Flutter实战经验，说到聊天软件肯定涉及聊天气泡，原生中的气泡背景一般都直接使用.9图，那么Flutter中如何实现缩放背景呢，这就是这次要介绍的centerSlice组件了，效果如下： 以下是我找的背景（113x48）
flutter offset_Flutter 仿微信界面聊天室 | 基于 （Flutter+Dart） 聊天实例
weixin_39588911的博客
11-22 271
1、项目介绍Flutter是目前比较流行的跨平台开发技术，凭借其出色的性能获得很多前端技术爱好者的关注，比如阿里闲鱼，美团，腾讯等大公司都在投入相关案例生产使用。flutter_chatroom项目是基于Flutter+Dart+chewie+photo_view+image_picker等技术开发的跨平台仿微信app聊天界面应用，实现了消息/表情发送、图片预览、长按菜单、红包/小视频/朋友圈等功...
flutter 自适应宽高气泡框，聊天气泡框
qq_35629609的博客
07-18 758
还有的就是通过算child 然后动态计算气泡框宽高，脱裤子💨，放到listview 刷新数据还会丢ui，因为要算某一个widget 的大小，必须是已经加载过，然后你再刷新listview然后更新大小。不管是text内容，还是布局大小你要计算那就GG。Container 红色正方形 然后 你剪切绘制成 气泡框的样子，然后 夹角长， 你直接Container padding 个夹角长度 ，内容不就显示全了么？看看我发表时间，我真的潦草一下博客吧。网上好多气泡框，都让写固定宽高，无法自适应文本内容。
custom_bubble_navigation_bar:Flutter中具有气泡单击效果的自定义导航栏
05-17
具有气泡单击效果的自定义导航栏。 概述 该项目的灵感和 当您单击导航栏时，此软件包可为您提供可爱的泡泡效果。 盘带： 实施的： 画廊 如何安装 将此添加到包的pubspec.yaml文件中： dependencies : ...
flutter_chat_app:Flutter聊天应用
04-02
flutter_chat_app 一个新的Flutter项目。 入门 该项目是Flutter应用程序的起点。 如果这是您的第一个Flutter项目，那么有一些资源可以帮助您入门： 要获得Flutter入门方面的帮助，请查看我们的，其中提供了教程，...
flutter_form_builder:Flutter Framework的简单表单制作工具
04-28
Flutter FormBuilder-flutter_form_builder 该软件包通过删除构建表单，验证字段，对更改做出React以及收集最终用户输入所需的样板，帮助在Flutter中创建数据收集表单。 简单用法 要使用此插件，请添加flutter_form...
flutter_inapp_purchase
03-25
flutter_inapp_purchase Flutter V2 该软件包与4.0.0 flutter v2兼容。 对于使用旧版本的用户，请使用< 4.0.0 。 太阳升起 :sunrise: 由于你们中的许多人都希望我在继续使用此插件，因此我决定继续从事当前项目...
android 微信聊天泡泡效果
12-05
实现了微信聊天时的效果，其中还是有一些地方不够完善，但基本已经实现，希望对大家有帮助
flutter_bubble_tab_indicator:Flutter库，用于向TabBar添加气泡标签指示器
05-06
气泡标签指示器 Flutter库，用于向TabBar添加气泡标签指示器。 入门 通过将以下内容添加到您的pubspec.yaml中，从github添加软件包，稍后添加pub发布。 dependencies: bubble_tab_indicator: "^0.1.5" 将库导入文件中： import 'package:bubble_tab_indicator/bubble_tab_indicator.dart'; 像这样使用BubbleTabIndicator： new TabBar( indicatorSize: TabBarIndicatorSize.tab, indicator: BubbleTabIndicator( indicatorHeight: 25.0, indicatorColor: Colors.
flutter_weather_bg:丰富而凉爽的天气动态背景插件
03-22
flutter_weather_bg 一个丰富而凉爽的天气动态背景插件，支持15种天气类型。 使用此插件可以在我自己的项目完成天气背景动画效果。如果您想体验一下，请进行下载 特征 它支持15种天气类型：晴天，晴天，阴天，阴天...
flutter图片聊天泡泡_[Flutter]聊天气泡组件
weixin_42396285的博客
12-30 872
import 'dart:math';import 'package:flutter/material.dart';// 尖角方向枚举enum BubbleAngleDirection { left, right }class BubbleWidget extends StatelessWidget {BubbleWidget(this.data, {Key key,this.textStyle ...
Flutter学习笔记 —— 聊天气泡布局实战
Marinda_Speed的博客
11-01 1168
最近在开发简易聊天室，刚好卡在怎么实现一个聊天气泡，于是经过反复测试，特地写下该文章，互相学习！
Flutter 自适应大小聊天气泡 自动大小 动态计算高度
xx50deathxx的博客
02-11 4826
Smart Bubble Widget 一个可自适应大小的聊天气泡Flutter组件 引用方式 dependencies: smart_bubble: ^1.0.1 https://pub.dev/packages/smart_bubble/admin https://github.com/50Death/Smart-Bubble-Widget 实现原理 气泡由背景(气泡本身)和内容(child)...
flutter图片聊天泡泡_Flutter极致的业务封装——各类聊天气泡(一)
weixin_36354492的博客
01-13 663
前言真的有段时间没写博客了，因为过去的一段时间工作实在是太忙了????，但忙也有忙的好处，在整个过程中自己的学习也非常快，在忙碌中充实自己，学习一些新的知识。因为刚刚实现了纯Flutter端的IM功能(太TM难了！????)在整个实现过程中，把自己对UI方面的一些理解写成blog。今天！给大家隆重介绍，我的气泡家庭????，就是你们看见的 微信里balbla~的聊天气泡了。Show Time朴实无华 —— 文字气泡...
flutter图片聊天泡泡_flutter仿微信app聊天|flutter聊天界面实例
weixin_39714565的博客
12-21 297
鉴于最近Flutter跨平台技术比较火，作为前端开发有必要去学习下，今天给大家分享的是基于flutter+dart+image_picker+photo_view等技术开发仿微信界面聊天应用实战项目案例。一、技术框架编码/技术：Vscode + Flutter 1.12.13/Dart 2.7.0视频组件：chewie: ^0.9.7图片/拍照：image_picker: ^0.6.6+1图片预览...
flutter聊天界面-消息气泡展示实现Flexible
一名开发者
07-07 1391
flutter聊天界面-消息气泡展示实现Flexible，主要Flexible实现展示，使用CustomPainter实现自定义绘制效果。
flutter flutter_zoomable_image
最新发布
07-29
import 'package:flutter_zoomable_image/flutter_zoomable_image.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值