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

Question

I need to add shadows to some icons in my flutter project. I've checked the icon class constructors but nothing points to that. Any idea on how to implement that?

Answer 1

I got what i wanted eventually using this workaround. I hope it helps whoever might need something similar.

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

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

You can use IconShadowWidget() .

How to use:

1. add dependencies to pubspec.yaml :

 icon_shadow: ^1.0.1

2. Import your Dart code :

import 'package:icon_shadow/icon_shadow.dart';

3. add icons:

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,
        ),
              ],
            ),
          ),

You can also check my GitHub Repository

Answer 4

  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,
                          )),
                    ),

result will be like this pic:

:

Answer 5

Whenever you need elevation/shadow, remember the Card widget. So, you can wrap it with 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,
            ),
          ),
        )

Even better, here is an icon button with material bubble effect + shadow (in below GIF, shadow's quality looks like bad, it is because of GIF itself)

:

          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 6

Took the idea from @Dzeri answer ( https://stackoverflow.com/a/55668093/414635 ) and encapsulated it into a Widget so it became reusable.

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),
      ],
    );
  }
}

The BackdropFilter doesn't seem to be working as expected but anyway all I needed was a subtle drop shadow. I'm also using the package font_awesome_flutter but you can replace the FaIcon by the native Icon widget.

Usage

Your can simply replace the native Icon by the ShadowIcon widget call:

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

Answer 7

Try this, use the icon font.

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');

Answer 8

You can use decorated icon plugin to do shadow on icon

Code here :

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

I know this is pretty late, but for anyone looking to add a shadow in circular form should wrap the icon with a CircleAvatar widget and set the backgroundColor proprety of CircleAvatar to Colors.grey.withOpacity (0.5) or to any other color for the shadow. Here's the code snippet

CircleAvatar (
bacgroundColor: Colors.grey.withOpacity (0.5),
child: Icon (
Icons.yourIcon
)

Answer 10

Right now, it's not possible to directly add shadows to an Icon widget. You can however use the additional information from your IconData icon to display the icon as a styled text.

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
  )
);

Answer 11

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,
    ),
    ),

if the container size is the same as the icon size, then 3 pixels will be always downward, This is because I don't know. but this solution will clear it. make sure that the container size will increase by 3 pixels with icons size.

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,
),
),

Answer 12

Material(
  color: Colors.transparent,
  elevation: 10,
  child: Icon(
    icons.add,

  ),
),

Answer 13

The Icon widget has a shadows property with which you can give shadows to an icon.

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