Container BoxShadow 不适用于 InkWell 材料 [英] Container BoxShadow not working with InkWell Material

问题描述

我想为这个容器使用 Inkwell splash.没有 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'),
                ],
              ),
            ),
          ),
        ),
      ),

我从容器中删除了 boxshadow 并添加了材质的高度，我得到了这样的结果.

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.

推荐答案

我通过用另一个 Container 小部件包装 Material 小部件来解决问题，然后我给这个容器提供了盒子阴影，我解决了我的问题.

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 不适用于 InkWell 材料的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！