Flutter中GridTile中图像上方的InkVell波纹

Flutter中GridTile中图像上方的InkVell波纹

我认为这是在图像上显示波纹效果的更好方法。

Ink.image(
    image: AssetImage('sample.jpg'),
    fit: BoxFit.cover,
    child: InkWell(
        onTap: () {},
    ),
),

使用Stack，我们可以将Material和InkWell带到图像上。要拉伸材质，我们将使用Positioned.fill小部件。

Stack(
  children: <Widget>[
    Image( ... ),
    Positioned.fill(
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: () { ... },
        ),
      ),
    ),
  ],
);

我们创建了这个简单的小部件，以在任何给定孩子的上方绘制墨水反应。

class InkWrapper extends StatelessWidget {
  final Color splashColor;
  final Widget child;
  final VoidCallback onTap;

  InkWrapper({
    this.splashColor,
    @required this.child,
    @required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        child,
        Positioned.fill(
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              splashColor: splashColor,
              onTap: onTap,
            ),
          ),
        ),
      ],
    );
  }
}

• 优秀的方法。即使在AspectRatio下也可以使用。如果可以使用FadeInImage会更好。

SizedBox(
  height: 200,
  child: Ink(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: ExactAssetImage("chocolate_image"),
        fit: BoxFit.cover,
      ),
    ),
    child: InkWell(
      onTap: () {},
      splashColor: Colors.brown.withOpacity(0.5),
    ),
  ),
)

Material(  
  child : InkWell(          
      child : YourWidget    
  )      
)

最后

这里也为想要学习Flutter的朋友们准备了两份学习指南《Flutter Dart语言编程入门到精通》《Flutter实战》

完整指南 关注vX公众号：Android 老皮

《Flutter Dart 语言编程入门到精通》

• 第一章 Dart语言基础

• 第二章 Dart 异步编程
  

• 第三章 异步之 Stream 详解

• 第四章 Dart标准输入输出流
  

• 第五章 Dart 网络编程

• 第六章 Flutter 爬虫与服务端
  

• 第七章 Dart 的服务端开发

• 第八章 Dart 调用C语言混合编程

• 第九章 LuaDardo中Dart与Lua的相互调用
  

《Flutter实战：第二版》

• 第一章：起步
• 第二章：第一个Flutter应用
• 第三章：基础组件
• 第四章：布局类组件
• 第五章：容器类组件

• 第六章：可滚动组件

• 第七章：功能型组件

• 第八章：事件处理与通知

• 第九章：动画

• 第十章：自定义组件
  

• 第十一章：文件操作与网络请求

• 第十二章：Flutter扩展

• 第十三章：国际化

• 第十四章：Flutter核心原理

• 第十五章：一个完整的Flutter应用
  

完整指南 关注vX公众号：Android 老皮