Flutter在Container设置渐变填充后Ink.image图片无法显示

1、环境版本

        Flutter版本：3.16.9

        开发IDE：android studio 2023.2.1 

        以下代码在Android中测试通过，iOS没有试过。以后升级啥的可能会和本方案会有出入，请自行甄别。

2、Ink.image图片无法显示场景

        当对Container做了LinearGradient渐变填充后，在其child中添加子Widget中包含lnk.image类型的图片按钮，会导致图片无法正常显示，但按钮还可以正常点击的情况，同时点击按钮也不会触发InkWell的水墨效果。

class _TestPageState extends State<TestPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      body: Column(
        children: [
          Container(
            width: double.infinity,
            padding: const EdgeInsets.only(top: 90),
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  Color.fromRGBO(21, 169, 113, 1.0),
                  Colors.white,
                  Colors.white,
                ],
              ),
            ),
            child: Column(
              children: [
                const SizedBox(height: 30,),
                Ink.image(
                  width: 60,
                  height: 60,
                  image:
                  const AssetImage(Assets.imagesIIconReport), //特定页面中调用会加载不出图片
                  onImageError: (Object exception, StackTrace? stackTrace) {
                    debugPrint("加载图片异常了！！！！！");
                  },
                  fit: BoxFit.fill,
                  child: InkWell(
                    borderRadius: const BorderRadius.all(Radius.circular(50.0)),
                    autofocus: true,
                    onTap: () {
                      print("点击");
                    },
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

        运行后的效果如下图：

3、解决方案

        这问题其实很容易解决，（未深入分析问题产生原因，个人猜测问题产生的原因）它的问题是出在Container在填充渐变背景色时和Ink.image中绘图产生了覆盖，填充的渐变背景色显示层级高于包含在内的Ink.image的图片，导致把图片覆盖后产生看不到的原因，但如果为图片按钮添加文字则文字是能正常显示。这个问题当是困扰了我很久，如果文字也不显示那还好说，立马能想到这个覆盖问题。只要把上面代码的填充最后一项颜色变成透明色就可以解决（当然也要取决于你图标按钮显示的位置，需要处在透明色区域）

              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  Color.fromRGBO(21, 169, 113, 1.0),
                  Colors.white,
                  //Colors.white,
                  Color.fromRGBO(255, 255, 255, 0),
                ],
              ),

        效果如下图：

        这大概可能是一个底层绘图BUG吧。