effect in java_Borderless selection highlight effect in Flutter

Context: I'm rewriting my Android app with Flutter. On Android, there was this interesting touch feedback effect when setting clickable View's background property to ?android:selectableItemBackgroundBorderless:

3f8320d097be862b76db91e92ae4deed.png

Note that the red border wasn't in the real UI, it's there just to show View's borders. As you can see, the ink forms a circle that is circumscribed around the rectangular view.

I would like the ink in my Flutter app to be also circumscribed around the view, i.e. the selection area needs to be circular and to encompass the view. I'm trying to achieve this by using InkResponse component, but the result looks miserable:

648d6900ce7dd292088e37f13dbb954e.png

The body of the Scaffold used in the example:

body: Center(

// Center is a layout widget. It takes a single child and positions it

// in the middle of the parent.

child: Material(

color: Color(0xff008080),

child: Center(

child: InkResponse(

onTap: () {

/* ... */

},

child: Container(

child: Center(

child: Text('BUTTON'),

),

decoration: BoxDecoration(

border: Border.all(color: Colors.red),

),

width: 200.0,

height: 200.0,

),

highlightColor: Colors.transparent,

),

),

),

),

If I make the radius property of the InkResponse big enough, it can go beyond the view's bounds, and if my view had static size, I could tweak the property to achieve the desired effect, but in my real app it's dynamic.

Is it possible to do it without making a custom component?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值