Flutter 如何在單擊時在 SVG 圖像上添加墨水效果

Question

這是當前代碼

InkWell(
    child: SvgPicture.asset(image),
    onTap: onTap
),

flutter 文檔中有一個示例，該示例使用 Ink.image 包裝了此代碼。 那只接受其他圖像類型，而不接受 svg。

我試過這兩種方法：

Stack(
  children: [
    InkWell(
        child: SvgPicture.asset(image),
        onTap: onTap
    ),
  ],
)

和

Ink(
    InkWell(
        child: SvgPicture.asset(image),
        onTap: onTap
    ),
)

但似乎沒有什么能解決問題。

任何幫助，將不勝感激。

Answer 1

我嘗試使用 svg 堆疊，並在墨水井上放置：

Stack(
  children: [
    SvgPicture.asset('assets/images/svg_image.svg'),
    Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: () {},
        borderRadius: BorderRadius.circular(20),
        child: Container(
          width: 45,
          height: 45,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
          ),
        ),
      ),
    )
  ],
);

Answer 2

以下解決方案應該有效

Stack(
      children: <Widget>[
        new Positioned.fill(
          bottom: 0.0,
          child: SvgPicture.asset('assets/note.svg'),
        ),
        new Positioned.fill(
          child: new Material(
            color: Colors.transparent,
            child: new InkWell(
              splashColor: Colors.blueAccent,
              onTap: () {},
            ),
          ),
        ),
      ],
    )