如何在颤动中向窗口小部件添加阴影？

Question

如何像图片一样为小部件添加阴影

您可以在下面的链接中找到小部件

[图像] [1]

[![在此处输入图片说明] [2]] [2]

Answer 1

BoxDecoration与 一起使用BoxShadow。

这是一个操作以下选项的可视化演示：

• 不透明度
• x 偏移量
• 偏移量
• 模糊半径
• 传播半径

动画 gif 对颜色的处理效果不佳。您可以在设备上自行尝试。

这是该演示的完整代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ShadowDemo(),
      ),
    );
  }
}

class ShadowDemo extends StatefulWidget {
  @override
  _ShadowDemoState createState() => _ShadowDemoState();
}

class _ShadowDemoState extends State<ShadowDemo> {
  var _image = NetworkImage('https://placebear.com/300/300');

  var _opacity = 1.0;
  var _xOffset = 0.0;
  var _yOffset = 0.0;
  var _blurRadius = 0.0;
  var _spreadRadius = 0.0;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Center(
          child:
          Container(
            decoration: BoxDecoration(
              color: Color(0xFF0099EE),
              boxShadow: [
                BoxShadow(
                  color: Color.fromRGBO(0, 0, 0, _opacity),
                  offset: Offset(_xOffset, _yOffset),
                  blurRadius: _blurRadius,
                  spreadRadius: _spreadRadius,
                )
              ],
            ),
            child: Image(image:_image, width: 100, height: 100,),
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: Padding(
            padding: const EdgeInsets.only(bottom: 80.0),
            child: Column(
              children: <Widget>[
                Spacer(),
                Slider(
                  value: _opacity,
                  min: 0.0,
                  max: 1.0,
                  onChanged: (newValue) =>
                  {
                    setState(() => _opacity = newValue)
                  },
                ),
                Slider(
                  value: _xOffset,
                  min: -100,
                  max: 100,
                  onChanged: (newValue) =>
                  {
                    setState(() => _xOffset = newValue)
                  },
                ),
                Slider(
                  value: _yOffset,
                  min: -100,
                  max: 100,
                  onChanged: (newValue) =>
                  {
                    setState(() => _yOffset = newValue)
                  },
                ),
                Slider(
                  value: _blurRadius,
                  min: 0,
                  max: 100,
                  onChanged: (newValue) =>
                  {
                    setState(() => _blurRadius = newValue)
                  },
                ),
                Slider(
                  value: _spreadRadius,
                  min: 0,
                  max: 100,
                  onChanged: (newValue) =>
                  {
                    setState(() => _spreadRadius = newValue)
                  },
                ),
              ],
            ),
          ),
        )
      ],
    );
  }
}

Answer 2

看看BoxShadow

A Container可以采取BoxDecoration(取消你最初发布的代码),这需要一个boxShadow

return new Container(
  height: 150.0,
  margin: new EdgeInsets.all(10.0),
  decoration: new BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.red,
        blurRadius: 20.0, // has the effect of softening the shadow
        spreadRadius: 5.0, // has the effect of extending the shadow
        offset: Offset(
          10.0, // horizontal, move right 10
          10.0, // vertical, move down 10
        ),
      )
    ],
    borderRadius: new BorderRadius.all(...),
    gradient: new LinearGradient(...),
  ),
  child: new Row(...),
);

Answer 3

截屏：

1. 使用BoxShadow（更多自定义）：

   Container(
     width: 100,
     height: 100,
     decoration: BoxDecoration(
       color: Colors.teal,
       borderRadius: BorderRadius.circular(20),
       boxShadow: [
         BoxShadow(
           color: Colors.red,
           blurRadius: 4,
           offset: Offset(4, 8), // Shadow position
         ),
       ],
     ),
   )
   

2. 使用PhysicalModel：

   PhysicalModel(
     color: Colors.teal,
     elevation: 8,
     shadowColor: Colors.red,
     borderRadius: BorderRadius.circular(20),
     child: SizedBox(width: 100, height: 100),
   )
   

3. 使用 Card

   Card(
     elevation: 8,
     shadowColor: Colors.red,
     child: Container(
       width: 100,
       height: 100,
       color: Colors.teal,
     ),
   )
   

Answer 4

在 Container 内使用带有 shadowColor 的 Material ，如下所示：

Container(
  decoration: BoxDecoration(
      borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(10),
          bottomRight: Radius.circular(10)),
      boxShadow: [
        BoxShadow(
            color: Color(0xffA22447).withOpacity(.05),
            offset: Offset(0, 0),
            blurRadius: 20,
            spreadRadius: 3)
      ]),
  child: Material(
    borderRadius: BorderRadius.only(
        bottomLeft: Radius.circular(10),
        bottomRight: Radius.circular(10)),
    elevation: 5,
    shadowColor: Color(0xffA22447).withOpacity(.05),
    color: Color(0xFFF7F7F7),
    child: SizedBox(
      height: MediaQuery.of(context).size.height / 3,
    ),
  ),
)

Answer 5

容器可以采用BoxDecoration（从您最初发布的代码中删除），它采用boxShadow：

decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    boxShadow: [
        BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3), // changes position of shadow
        ),
    ],
),

Answer 6

我就是这样做的

    Container(
  decoration: new BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey[200],
        blurRadius: 2.0, // has the effect of softening the shadow
        spreadRadius: 2.0, // has the effect of extending the shadow
        offset: Offset(
          5.0, // horizontal, move right 10
          5.0, // vertical, move down 10
        ),
      )
    ],
  ),
  child: Container( 
       color: Colors.white, //in your example it's blue, pink etc..
       child: //your content
  )

Answer 7

给出的答案可以解决小部件周围的外部阴影问题。我想要在边界内的小部件上有一个阴影，根据github 问题， ShadowBox 中还没有 inset 属性。我的解决方法是使用堆栈小部件添加一个带有渐变的小部件层，这样看起来小部件本身就有阴影。您必须使用 mediaQuery 来获取尺寸，否则布局在不同设备上会变得混乱。为了更好地理解，这里有一个代码示例：

Stack(
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    fit: BoxFit.cover,
                    image: AssetImage("assets/sampleFaces/makeup.jpeg"),
                    // fit: BoxFit.cover,
                  ),
                ),
                height: 350.0,
              ),
              Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: FractionalOffset.topCenter,
                    end: FractionalOffset.bottomCenter,
                    colors: [
                      Colors.black.withOpacity(0.0),
                      Colors.black54,
                    ],
                    stops: [0.95, 5.0],
                  ),
                ),
              )
            ],
          ),

Answer 8

PhysicalModel将帮助您为其提供高程阴影。

 Container(
        alignment: Alignment.center,
        child: Column(
          children: <Widget>[
            SizedBox(
              height: 60,
            ),
            Container(
              child: PhysicalModel(
                borderRadius: BorderRadius.circular(20),
                color: Colors.blue,
                elevation: 18,
                shadowColor: Colors.red,
                child: Container(
                  height: 100,
                  width: 100,
                ),
              ),
            ),
            SizedBox(
              height: 60,
            ),
            Container(
              child: PhysicalShape(
                color: Colors.blue,
                shadowColor: Colors.red,
                elevation: 18,
                clipper: ShapeBorderClipper(shape: CircleBorder()),
                child: Container(
                  height: 150,
                  width: 150,
                ),
              ),
            )
          ],
        ),
      )

Answer 9

在开始使用这些答案之一重新发明轮子之前，请查看材料卡小部件。它还允许您直接通过应用程序主题定义全局样式：