Flutter使用InkWell无水波纹效果

https://www.jianshu.com/p/0c6417a10ec0

 

正常情况下使用方式:

InkWell(
      onTap: () { },
      child: Container(
               height: 50,
               child: Text( "是速度",
                          maxLines: 1,
                          style: TextStyle(color: color),
                          overflow: TextOverflow.ellipsis,
                              ),
          ),
  )

如果在InkWell的上下都出现的颜色的设置,如上中的Container中如果加入了color:Colors.white,这时候InkWell的水波纹效果会无效

解决方案是:在InkWell的外层再套上Matetial 以及 Ink组件

Material(
  child: Ink(
    child:
      InkWell(
        onTap: () { },
        child: Container(
           height: 50.0,
           color: Colors.white,
           child: Text( "是速度",
               maxLines: 1,
               style: TextStyle(color: color),
               overflow: TextOverflow.ellipsis,
               ),
          ),
      ),
    ),
  )


作者:世见DeanWong
链接:https://www.jianshu.com/p/0c6417a10ec0
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 

相关文章

这篇文章主要讲解了“FlutterComponent动画的显和隐怎么实现...
这篇文章主要讲解了“flutter微信聊天输入框功能如何实现”,...
本篇内容介绍了“Flutter之Navigator的高级用法有哪些”的有...
这篇文章主要介绍“Flutter怎么使用Android原生播放器”,在...
Flutter开发的android端如何修改APP名称,logo,版本号,具体...
Flutter路由管理初识路由概念一.路由管理1.1.Route1.2.Mater...