Flutter使用ClipPath畫乙個聊天氣泡

2021-10-05 12:38:35 字數 1138 閱讀 5008

先看一下效果圖:

先畫乙個三角形再畫乙個圓角矩形,然後把兩個圖案重合起來就實現 了乙個聊天氣泡

const _arrowwidth = 7.0; //箭頭寬度

const _arrowheight = 10.0; //箭頭高度

const _minheight = 32.0; //內容最小高度

const _minwidth = 50.0; //內容最小寬度

class bubble extends statelesswidget )

: _left = direction == bubbledirection.left ? _arrowwidth : 0.0,

_right = direction == bubbledirection.right ? _arrowwidth : 0.0,

super(key: key);

@override

widget build(buildcontext context)

}///方向

enum bubbledirection

class _bubbleclipper extends customclipper else

return path;

} @override

bool shouldreclip(customclipperoldclipper)

}

bubble(

color: colors.purple,

child: text(

"你6666",

style: textstyle(color: colors.white),),)

Flutter 動畫使用

效果預覽 旋轉動畫 透明度變換動畫 在android中,可以通過view.animate 對檢視進行動畫處理,那在flutter中怎樣才能對widget進行處理 在flutter中,可以通過動畫庫給widget新增動畫。在android中,您可以通過xml建立動畫或在檢視上呼叫.animate 在f...

Flutter 動畫使用

旋轉動畫 透明度變換動畫 在android中,可以通過view.animate 對檢視進行動畫處理,那在flutter中怎樣才能對widget進行處理 在flutter中,可以通過動畫庫給widget新增動畫。在android中,您可以通過xml建立動畫或在檢視上呼叫.animate 在flutte...

flutter的元件使用

1.container容器元件示例 2.元件 new image 從imageprovider獲取影象。import package flutter material.dart 3.文字元件這個元件內容很豐富 4.按鈕圖示等於是安卓裡的按鈕控制項 5.凸起按鈕元件對於是安卓裡的butten 6。li...