将自定义boxshadow添加到Flutter卡

Question

我在Flutter应用程序中实现了卡片.BoxShadow每张卡都需要一个自定义.如何才能做到这一点？

到目前为止我尝试过的是将BoxShadow属性添加到Card()构造函数中,这不起作用...

Answer 1

该卡的Widget不具有装饰属性,因此你需要一卡一内部容器,然后应用BoxShadow到集装箱,

样品:

class mycard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Card(
        child: new Center(
          child: new Icon(
            Icons.refresh,
            size: 150.0,
          ),
        ),
      ),
      decoration: new BoxDecoration(boxShadow: [
        new BoxShadow(
          color: Colors.black,
          blurRadius: 20.0,
        ),
      ]),
    );
  }
}

Answer 2

查看卡片小部件

      @override
      Widget build(BuildContext context) {
        return Scaffold(
            backgroundColor: Color(0xFFdde0e3),
            body: SingleChildScrollView(
              child: Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Card(
                      elevation:5,
                      margin: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 16.0),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(0.0),
                      ),
                      child: Container(
                        height: 200,
                      ),
                    )
                  ],
                ),
              ),
            ));
      }

Answer 3

通过获取 boxShadow 属性，只需将卡片包装在容器中即可将阴影应用于卡片小部件。

new Container(
  width: 100,
  height: 100,
  decoration: new BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(.5),
        blurRadius: 20.0, // soften the shadow
        spreadRadius: 0.0, //extend the shadow
        offset: Offset(
          5.0, // Move to right 10  horizontally
          5.0, // Move to bottom 10 Vertically
        ),
      )
    ],
  ),
),

Answer 4

当主要谈论阴影时，阴影的外观可以通过调整blurness和来改变color。

因此，您可以在不编写额外代码行的情况下执行此类操作。

Card(
  elevation: 4,  // Change this 
  shadowColor: Colors.black12,  // Change this 
  child: Center(child: Text('Hey, dude.')),
),