如何在 flutter 中为图标添加阴影？

问题描述 投票：0回答：14

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

dart flutter
14个回答
45
投票

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

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

Icon 小部件具有阴影属性，您可以使用该属性为图标添加阴影。

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

10
投票
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,
  )
),
6
投票

您可以使用

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

5
投票

每当您需要高程/阴影时，请记住

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: () {},
              ),
            ),
          ),
        )
4
投票

从@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(),
),
2
投票
  InkWell(
      child: Container(
                padding: const EdgeInsets.all(4.0),
                decoration: BoxDecoration(
                             color: Colors.white,
                             shape: BoxShape.circle,
                             boxShadow: [
                                BoxShadow(
                                  color: Colors.grey,
                                  blurRadius: .5,
                                ),
                              ]),
                child: Icon(
                         Icons.clear,
                         color: Colors.black,
                         size: 25,
                          )),
                    ),

结果会像这张图：

circle icon button with shadow:

2
投票

现在，无法直接向图标小部件添加阴影。但是，您可以使用 IconData 图标中的附加信息将图标显示为样式文本。

Text(
  String.fromCharCode(Icons.add.codePoint), 
  style: TextStyle(
    fontFamily: Icons.add.fontFamily,
    color: Colors.white, 
    fontSize: 20.0,
    shadows: [
      BoxShadow(
        color: ColorTheme.blackLight,
        spreadRadius: 2,
        blurRadius: 2,
      )
    ],
    height: 1 //if this isn't set, the shadow will be cut off on the top and bottom
  )
);
1
投票

试试这个，使用图标字体。

GestureDetector(
                  child: Container(
                    padding: EdgeInsets.only(right: 10, top: 10),
                    child: Text('\u{e5d3}',
                        style: TextStyle(
                            fontSize: 22,
                            color: Colors.white,
                            fontFamily: 'MaterialIcons',
                            shadows: [
                              BoxShadow(color: Colors.black, blurRadius: 2)
                            ])),
                  ),
                  onTap: () {}
)

Icon data from icons.dart
/// <i class="material-icons md-36">more_horiz</i> &#x2014; material icon named "more horiz".
static const IconData more_horiz = IconData(0xe5d3, fontFamily: 'MaterialIcons');
1
投票

您可以使用装饰图标插件在图标上做阴影

代码在这里：

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),
            ),
          ],
        ),
      ],
    ),
  ),
);
0
投票

我知道这已经很晚了，但是对于任何想要以圆形形式添加阴影的人来说，应该用 CircleAvatar 小部件包裹图标并将 CircleAvatar 的 backgroundColor 属性设置为 Colors.grey.withOpacity (0.5) 或任何其他颜色阴影。这是代码片段

CircleAvatar (
bacgroundColor: Colors.grey.withOpacity (0.5),
child: Icon (
Icons.yourIcon
)
0
投票
Material(
  color: Colors.transparent,
  elevation: 10,
  child: Icon(
    icons.add,

  ),
),
0
投票
Container(
  width: 30,
  height: 30,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(100),
    boxShadow: const [
      BoxShadow(color: Colors.grey, blurRadius: 1),
    ],
  ),
  child: const Icon(
    FontAwesomeIcons.checkCircle,
    size: 30,
    color: Colors.green,
  ),
),

如果容器尺寸和图标尺寸一样，那么3像素会一直向下，这是因为我不知道。但这个解决方案会清除它。

确保容器大小随图标大小增加 3 个像素。

Container(
  width: 33,
  height: 33,
  decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(100),
      boxShadow: const [
        BoxShadow(color: Colors.grey, blurRadius: 1),
      ]),
  child: const Icon(
    FontAwesomeIcons.checkCircle,
    size: 30,
    color: Colors.green,
  ),
),
0
投票

基于this answer您可以使用此代码并可能添加一些更改

import 'package:flutter/material.dart';

class IconShadowView extends Icon {
  const IconShadowView(super.icon,
      {super.key,
      super.color,
      super.semanticLabel,
      super.shadows,
      super.size,
      super.textDirection});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned(
          left: 1.0,
          top: 2.0,
          child: Icon(
            icon,
            color: Colors.black,
            key: key,
            semanticLabel: semanticLabel,
            shadows: shadows,
            size: size,
            textDirection: textDirection,
          ),
        ),
        super.build(context),
      ],
    );
  }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.