Question

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

Answer 1

您可以使用 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 Repository

Answer 2

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 3

最终，我得到了我想要的解决方法。我希望它能对可能需要类似东西的人有所帮助。

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

Answer 4

putty.exe -ssh uname@host.domain.com -L <server_port>:host.domain.com:<local_port>

结果将像这张照片circle icon button with shadow：

Answer 5

我认为Material小部件的elevation属性是您想要的。您可以像这样使用它：

Material(
    elevation: 4.0,
    child: IconButton(
        icon: Icons(Icon.info),
        onPressed: () => {},
    )
)

Answer 6

每当需要高程/阴影时，请记住Card小部件。因此，您可以用Card和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: () {},
              ),
            ),
          ),
        )

Answer 7

从@Dzeri 的答案 (https://stackoverflow.com/a/55668093/414635) 中汲取了这个想法，并将其封装到一个 Widget 中，以便可以重用。

小工具

class ShadowIcon extends StatelessWidget {
  final IconData icon;
  final Color color;

  ShadowIcon(this.icon, {Key key, this.color: kLight}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          left: 0.5,
          top: 0.5,
          child: BackdropFilter(
            filter: ImageFilter.blur(
              sigmaX: 1.0,
              sigmaY: 1.0,
            ),
            child: FaIcon(this.icon, color: kDark.withOpacity(0.7)),
          ),
        ),
        FaIcon(this.icon, color: color),
      ],
    );
  }
}

BackdropFilter 似乎没有按预期工作，但无论如何我所需要的只是一个微妙的阴影。我也在使用 font_awesome_flutter 包，但您可以将 FaIcon 替换为原生 Icon 小部件。

用法

您可以简单地将原生 Icon 替换为 ShadowIcon 小部件调用：

IconButton(
  icon: ShadowIcon(FontAwesomeIcons.chevronLeft, color: kLight),
  onPressed: () => Get.back(),
),

Answer 8

您可以使用 decorated icon 插件在图标上做阴影

代码在这里：

Scaffold(
  body: Center(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        DecoratedIcon(
          Icons.android,
          color: Colors.purple,
          size: 60.0,
          shadows: [
            BoxShadow(
              blurRadius: 42.0,
              color: Colors.purpleAccent,
            ),
            BoxShadow(
              blurRadius: 12.0,
              color: Colors.white,
            ),
          ],
        ),
        DecoratedIcon(
          Icons.favorite,
          color: Colors.lightBlue.shade50,
          size: 60.0,
          shadows: [
            BoxShadow(
              blurRadius: 12.0,
              color: Colors.blue,
            ),
            BoxShadow(
              blurRadius: 12.0,
              color: Colors.green,
              offset: Offset(0, 6.0),
            ),
          ],
        ),
        DecoratedIcon(
          Icons.fingerprint,
          color: Colors.orange,
          size: 60.0,
          shadows: [
            BoxShadow(
              color: Colors.black,
              offset: Offset(3.0, 3.0),
            ),
          ],
        ),
      ],
    ),
  ),
);

Answer 9

我知道这已经很晚了，但是对于任何寻找简单解决方案的人来说，将使用 CircleAvatar 小部件包裹您的图标并将 CircleAvatar 的 backgroundColor 属性设置为 Colors.grey.withOpacity (0.5) 或任何其他颜色影子。这是代码片段

forward

Answer 10

尝试一下，使用图标字体。

GestureDetector（子代：集装箱（ padding：EdgeInsets.only（right：10，top：10），子代：文字（'\ u {e5d3}'，样式：TextStyle（ fontSize：22，颜色：Colors.white， fontFamily：“ MaterialIcons”，阴影：[ BoxShadow（颜色：Colors.black，blurRadius：2） ]）），）， onTap：（）{} ）

icons.dart中的图标数据 /// more_horiz —名为“ more horiz”的材质图标。静态const IconData more_horiz = IconData（0xe5d3，fontFamily：'MaterialIcons'）;

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

10 个答案:

小工具

用法