Container BoxShadow无法与InkVell材料一起使用

问题描述

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

I want to use Inkwell splash for this container.Without Inkwell widget.

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'),
            ],
          ),
        ),
      ),

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

But when i add inkwell and material widget it looks like

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'),
                ],
              ),
            ),
          ),
        ),
      ),

我从容器中移除了箱形阴影，并增加了物料的高度，然后我得到了这样的结果.

I removed boxshadow from container and added elevation for material and i got like this.

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'),
                ],
              ),
            ),
          ),
        ),
      )

最后，它与我需要的东西相似，但是在容器顶部，即将到来的阴影或高程不像需要的那样.任何人都可以像第一张图片一样获得阴影.

finally it similar to what i need but in top of the container that coming shadow or elevation is not like needed one.Anyone how to get shadow like first image.

推荐答案

我通过用另一个容器"小部件包装材料"小部件来解决此问题，并给该容器添加了阴影，然后我解决了问题.

I solved by wrapping Material widget by another Container widget and i give box shadow to this container, and i resolved my problem.

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'),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),

这篇关于Container BoxShadow无法与InkVell材料一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！