Container BoxShadow无法与InkWell材质一起使用

Question

我想为此容器使用Inkwell飞溅。没有Inkwell小部件。

Expanded(
        child: Container(
          padding: EdgeInsets.all(12.0),
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                  color: Colors.black26,
                  offset: Offset(0, 1),
                  blurRadius: 2.0)
            ],
            borderRadius: BorderRadius.circular(12.0),
            color: _size.white,
          ),
          child: Column(
            children: <Widget>[
              Icon(
                Icons.book,
                color: _size.green,
              ),
              SizedBox(
                height: 4.0,
              ),
              Text('Instant'),
            ],
          ),
        ),
      ),

但是当我添加墨水池和材质小部件时，它看起来像

Expanded(
        child: Material(
          color: _size.white,
          child: InkWell(
            borderRadius: BorderRadius.circular(12.0),
            onTap: () {},
            splashColor: Colors.red,
            splashFactory: InkSplash.splashFactory,
            child: Container(
              padding: EdgeInsets.all(12.0),
              decoration: BoxDecoration(
                boxShadow: [
                  BoxShadow(
                      color: Colors.black26,
                      offset: Offset(0, 1),
                      blurRadius: 2.0)
                ],
                borderRadius: BorderRadius.circular(12.0),
                //color: _size.white,
              ),
              child: Column(
                children: <Widget>[
                  Icon(
                    Icons.book,
                    color: _size.green,
                  ),
                  SizedBox(
                    height: 4.0,
                  ),
                  Text('Instant'),
                ],
              ),
            ),
          ),
        ),
      ),

我从容器中移除了箱形阴影，并增加了材料的高度，我得到了这样的效果。

Expanded(
        child: Material(
          borderRadius: BorderRadius.circular(12.0),
          elevation: 2.0,
          color: _size.white,
          child: InkWell(
            borderRadius: BorderRadius.circular(12.0),
            onTap: () {},
            splashColor: Colors.red,
            splashFactory: InkSplash.splashFactory,
            child: Container(
              padding: EdgeInsets.all(12.0),
              decoration: BoxDecoration(
                /*boxShadow: [
                  BoxShadow(
                      color: Colors.black26,
                      offset: Offset(0, 1),
                      blurRadius: 2.0)
                ],*/
                borderRadius: BorderRadius.circular(12.0),
                //color: _size.white,
              ),
              child: Column(
                children: <Widget>[
                  Icon(
                    Icons.book,
                    color: _size.green,
                  ),
                  SizedBox(
                    height: 4.0,
                  ),
                  Text('Instant'),
                ],
              ),
            ),
          ),
        ),
      )

最终与我需要的东西相似，但是在容器顶部，即将出现的阴影或高程不是所需的。任何人都可以像第一张图片一样获得阴影。

Answer 1

我通过用另一个Container小部件包装Material小部件并为该容器提供框阴影解决了问题，]。>

Expanded(
        child: Container(
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                  color: Colors.black26,
                  offset: Offset(0, 1),
                  blurRadius: 2.0)
            ],
            borderRadius: BorderRadius.circular(12.0),
            color: _size.white,
          ),
          child: Material(
            borderRadius: BorderRadius.circular(12.0),
            color: _size.white,
            child: InkWell(
              borderRadius: BorderRadius.circular(12.0),
              onTap: () {},
              splashColor: Colors.red,
              splashFactory: InkSplash.splashFactory,
              child: Container(
                padding: EdgeInsets.all(12.0),
                child: Column(
                  children: <Widget>[
                    Icon(
                      Icons.book,
                      color: _size.green,
                    ),
                    SizedBox(
                      height: 4.0,
                    ),
                    Text('Instant'),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),

Answer 2

尝试使用Card

Answer 3

使用Ink时使用Material代替Inkwell，然后为内部Container提供一种颜色（默认情况下是透明的，只在下面显示阴影）：