Shulou(Shulou.com)06/03 Report--

Editor to share with you how to use InkWell in flutter to achieve water ripple click effect, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Click events have been added to wrap a component in InkWell or GestureDetector in flutter development.

GestureDetector uses click without water ripple to appear, InkWell can achieve water ripple effect. Use under normal circumstances:

InkWell (/ / Click event response onTap: () {}, child: Container (alignment: Alignment (0,0), height: 28, width: 120, child: Text ("InkWell Click event"),)

If the color setting appears both above and below the InkWell, such as if color:Colors.white is added to the Container above, or if other widget in the Container sets the coloro property, then the InkWell ripple effect will not be effective.

1 widget sets the ripple click effect and sets the widget background

New Center (child: new Material (/ / set background color default rectangle color: Colors.purple, child: new InkWell (/ / click event callback onTap: () {}, / / do not set background color here For will block the ripple effect. If set, try to set the color under the Material to achieve the background color child: new Container (width: 300.0, height: 50.0, / / set child center alignment: Alignment (0,0), child: Text ("login", style: TextStyle (color: Colors.white,fontSize: 16.0),)

Or you can use Ink to set it, and unlike Material to set color, Ink sets the shape style of the background.

New Center (child: new Material (/ / INK) can be used to decorate containers Implement rectangle setting background color child: new Ink (/ / set background default rectangle color: Colors.purple, child: new InkWell (/ / click event callback onTap: () {}, child: new Container (width: 300.0, height: 50.0, / / set child center alignment: Alignment (0,0), child: Text ("login", style: TextStyle (color: Colors.white,fontSize: 16.0),)) ),

2 fillet widget sets the click effect of water ripple

New Center (child: new Material (/ / INK) can implement decoration container child: new Ink (/ / use ink rounded rectangle / / color: Colors.red, decoration: new BoxDecoration (/ / cannot use Ink's variable color attribute and decoration attribute at the same time There can only be one color: Colors.purple, / / set fillet borderRadius: new BorderRadius.all (new Radius.circular),), child: new InkWell (/ / fillet setting, feed ripple also set the same fillet / / if it is not set here, the rectangular ripple effect will appear borderRadius: new BorderRadius.circular, / / set click event callback onTap: () {} Child: new Container (width: 300.0, height: 50.0, / / set child to center alignment: Alignment (0,0), child: Text ("login", style: TextStyle (color: Colors.white,fontSize: 16.0),)

If InkWell and Ink do not set the same fillet at the same time, for example, the fillet set by lnk is 20, but Ink is not set, there will be a rectangular ripple click effect.

3 fillet widget setting custom ripple color click effect

New Center (child: new Material (child: new Ink (/ / set background decoration: new BoxDecoration (color: Colors.purple, borderRadius: new BorderRadius.all (new Radius.circular),), child: new InkResponse (borderRadius: new BorderRadius.all (new Radius.circular (25.0)), / / the control displayed when the toch control is highlighted is on the upper layer of the control, and the lower layer of the ripple is / / highlightColor: Colors.yellowAccent / / Click on the shape shape highlighted by the toch control highlightShape: BoxShape.rectangle, / / .InkResponse internal radius, which needs to be noted We need a radius larger than the width of the control. If the radius is too small, the displayed water ripple is a very small circle. / / the radius of the water ripple is radius: 300.0, / / the color of the water ripple is splashColor: Colors.black, / / true means that the interface for clipping the water ripple response false is not clipped. If the control is rounded and not clipped, the water ripple is rectangular containedInkWell: true, / / click event onTap: () {print ("click") }, child: new Container (/ / you cannot set the decorator color inside the child container of InkResponse, otherwise it will cover the ripple color. If containedInkWell is set to false, you can see whether it is covered or not. Width: 300.0, height: 300.0, / / set child to center alignment: Alignment (0,0), child: Text ("login", style: TextStyle (color: Colors.white,fontSize: 16.0),)

4 fillet widget set highlight color click effect

New Center (child: new Material (child: new Ink (/ / set background decoration: new BoxDecoration (color: Colors.purple, borderRadius: new BorderRadius.all (new Radius.circular (30.0),), child: new InkResponse (borderRadius: new BorderRadius.all (new Radius.circular (30.0)), / / the controls displayed when the toch control is highlighted are on the upper layer of the control, and highlightColor: Colors.purple on the lower layer of the ripple / / Click on the shape shape highlighted by the toch control highlightShape: BoxShape.rectangle, / / .InkResponse internal radius, which needs to be noted We need a radius larger than the width of the control. If the radius is too small, the water ripple displayed is a very small circle. / / the radius of the water ripple radius: 0.00.When the color of the water ripple is set to the highlightColor attribute, splashColor will have no effect splashColor: Colors.red, / / true means that the interface for clipping the water ripple response false is not clipped. If the control is fillet and not clipped, the water ripple is rectangular containedInkWell: true, onTap: () {print ('click'). }, child: new Container (/ / you cannot set the decorator color inside the child container of InkResponse, otherwise it will cover the ripple color. If containedInkWell is set to false, you can see whether it is covered or not. Width: 300.0, height: 300.0, / / set child to center alignment: Alignment (0,0), child: Text ("login", style: TextStyle (color: Colors.white,fontSize: 16.0),)

The above is all the content of the article "how to use InkWell to achieve water ripple click effect in flutter". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.