Flutter图标阴影效果插件flutter_icon_shadow的使用

Flutter图标阴影效果插件flutter_icon_shadow的使用

介绍

Flutter Icon Shadow 插件允许你在图标下方添加阴影。你可以自定义阴影的颜色、模糊程度（sigma）和偏移量。这个插件是从 icon_shadow 包中分叉出来的，增加了空安全和更多功能。

如何使用

1. 添加依赖到 pubspec.yaml 文件

在你的 pubspec.yaml 文件中添加 flutter_icon_shadow 依赖：

flutter pub add flutter_icon_shadow

2. 添加图标

只需将你的图标包裹在 IconShadow 小部件中，它接受一个 Icon 小部件作为第一个参数。

更多的参数也可以使用：Color? shadowColor，double shadowBlurSigma = 0.9 和 Offset shadowOffset = Offset.zero。

以下是一个完整的示例 demo：

// ignore_for_file: depend_on_referenced_packages, library_private_types_in_public_api

import 'package:flutter/material.dart';
import 'package:flutter_icon_shadow/flutter_icon_shadow.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是应用程序的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: const Text('Flutter Icon Shadow'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                // 默认阴影
                const IconShadow(
                  Icon(
                    Icons.lightbulb_outline,
                    color: Colors.lightBlueAccent,
                    size: 36,
                  ),
                ),
                // 自定义颜色和偏移量
                IconShadow(
                  const Icon(
                    Icons.lightbulb_outline,
                    color: Colors.lightBlueAccent,
                    size: 36,
                  ),
                  shadowColor: Colors.lightBlueAccent[100],
                  shadowOffset: const Offset(2, 2), // 可选，可能会因边界框而被裁剪
                ),
                // 不显示阴影
                const IconShadow(
                  Icon(
                    Icons.lightbulb_outline,
                    color: Colors.lightBlueAccent,
                    size: 36,
                  ),
                  showShadow: false,
                )
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                // 自定义颜色
                IconShadow(
                  Icon(
                    Icons.home,
                    color: Colors.green[900],
                    size: 36,
                  ),
                  shadowColor: Colors.yellowAccent,
                ),
                // 自定义偏移量
                IconShadow(
                  Icon(
                    Icons.home,
                    color: Colors.green[900],
                    size: 36,
                  ),
                  shadowOffset: const Offset(2, 2),
                ),
                // 不显示阴影
                IconShadow(
                  Icon(
                    Icons.home,
                    color: Colors.green[900],
                    size: 36,
                  ),
                  showShadow: false,
                )
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                // 自定义颜色
                IconShadow(
                  const Icon(
                    Icons.access_alarm,
                    color: Colors.black54,
                    size: 36,
                  ),
                  shadowColor: Colors.yellowAccent[400],
                ),
                // 自定义颜色和偏移量
                IconShadow(
                  const Icon(
                    Icons.access_alarm,
                    color: Colors.black54,
                    size: 36,
                  ),
                  shadowColor: Colors.red[400],
                  shadowOffset: const Offset(2, 2),
                ),
                // 自定义颜色
                IconShadow(
                  const Icon(
                    Icons.access_alarm,
                    color: Colors.black54,
                    size: 36,
                  ),
                  shadowColor: Colors.cyanAccent[400],
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}