如何在阴影中向图标添加阴影？

Question

我需要在flutter项目中的某些图标上添加阴影。我已经检查了图标类的构造函数，但是没有任何指向。关于如何实施的任何想法？

Answer 1

Icon 小部件有一个shadows 属性，您可以使用它为图标提供阴影。

const Icon(
     icon,
     shadows: <Shadow>[Shadow(color: Colors.black, blurRadius: 15.0)],
     size: 60,
     color: Colors.white,
)

Answer 2

我最终使用此解决方法得到了我想要的东西。我希望它可以帮助任何可能需要类似东西的人。

                Stack(
                  children: <Widget>[
                    Positioned(
                      left: 1.0,
                      top: 2.0,
                      child: Icon(icon, color: Colors.black54),
                    ),
                    Icon(icon, color: Colors.white),
                  ],
                ),

Answer 3

Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle,               
    boxShadow: [
      BoxShadow(
        color: Colors.grey[400],
        blurRadius: 5.0,
      ),
    ]
  ),
  child: Icon(
    Icons.fiber_manual_record,
    color: Colors.amber,
    size:15,
  )
),

Answer 4

您可以使用 IconShadowWidget()。

如何使用：

1. 添加依赖项 pubspec.yaml：

 icon_shadow: ^1.0.1

2. 导入您的 Dart 代码：

import 'package:icon_shadow/icon_shadow.dart';

3.添加图标：

Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
        IconShadowWidget(
          Icon(
            Icons.add_circle,
            color: Colors.red,
            size: 100.0,
          ),
        ),
        IconShadowWidget(
          Icon(
            Icons.add_circle,
            color: Colors.red,
            size: 100.0,
          ),
          shadowColor: Colors.black,
        ),
        IconShadowWidget(
          Icon(
            Icons.add_circle,
            color: Colors.red,
            size: 100.0,
          ),
          shadowColor: Colors.black,
          showShadow: false,
        ),
              ],
            ),
          ),

您还可以查看我的GitHub 存储库

Answer 5

每当您需要高程/阴影时，请记住该Card小部件。Card所以，你可以用and包裹它SizedBox：

          Card(
          elevation: 10,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(35.0),
          ),
          child: SizedBox(
            width: 35,
            height: 35,
            child: Icon(
              Icons.close,
              color: Colors.black,
              size: 19,
            ),
          ),
        )

更好的是，这里有一个带有材质气泡效果+阴影的图标按钮（在下面的GIF中，阴影的质量看起来很差，这是因为GIF本身）

:

          Card(
          elevation: 10,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(35.0),
          ),
          child: ClipOval(
            child: Material(
              color: Colors.transparent, // button color
              child: InkWell(
                splashColor: Colors.red, // inkwell color
                child: SizedBox(
                  width: 35,
                  height: 35,
                  child: Icon(
                    Icons.close,
                    color: Colors.black,
                    size: 19,
                  ),
                ),
                onTap: () {},
              ),
            ),
          ),
        )