Flutter阴影效果插件simple_shadow的使用

Flutter阴影效果插件simple_shadow的使用

simple_shadow 是一个用于为任何Flutter小部件添加可自定义阴影效果的插件。通过这个插件，你可以轻松地为你的应用中的元素添加阴影，以增强视觉效果。

快速开始

1. 导入插件

首先，在你的Dart文件中导入 simple_shadow 插件：

import 'package:simple_shadow/simple_shadow.dart';

2. 使用SimpleShadow小部件

SimpleShadow 小部件可以包裹任何其他小部件，并为其添加阴影效果。以下是一个简单的示例，展示了如何为一个图片添加阴影：

SimpleShadow(
  child: Image.asset('images/bird.png'), // 要添加阴影的子小部件
  opacity: 0.6,         // 阴影的透明度，默认值为0.5
  color: Colors.blue,   // 阴影的颜色，默认值为黑色
  offset: Offset(5, 5), // 阴影的偏移量，默认值为Offset(2, 2)
  sigma: 7,             // 阴影的模糊半径，默认值为2
)

示例效果

以下是不同参数设置下的阴影效果示例：

默认效果

颜色为蓝色

通过设置 color 参数为 Colors.blue，可以将阴影颜色更改为蓝色：

不透明度为1

通过设置 opacity 参数为 1，可以使阴影完全不透明：

模糊半径为10

通过设置 sigma 参数为 10，可以增加阴影的模糊程度：

偏移量为Offset(10, 10)

通过设置 offset 参数为 Offset(10, 10)，可以将阴影向右下方移动10个像素：

完整示例代码

以下是一个完整的Flutter应用程序示例，展示了如何使用 simple_shadow 插件为多个小部件添加不同的阴影效果：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SimpleShadow 示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 默认阴影效果
              SimpleShadow(
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
                opacity: 0.5,
                color: Colors.black,
                offset: Offset(2, 2),
                sigma: 2,
              ),
              SizedBox(height: 20),

              // 蓝色阴影
              SimpleShadow(
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.green,
                ),
                opacity: 0.6,
                color: Colors.blue,
                offset: Offset(5, 5),
                sigma: 7,
              ),
              SizedBox(height: 20),

              // 完全不透明的阴影
              SimpleShadow(
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.yellow,
                ),
                opacity: 1.0,
                color: Colors.black,
                offset: Offset(3, 3),
                sigma: 5,
              ),
              SizedBox(height: 20),

              // 大模糊半径的阴影
              SimpleShadow(
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.purple,
                ),
                opacity: 0.8,
                color: Colors.grey,
                offset: Offset(4, 4),
                sigma: 10,
              ),
              SizedBox(height: 20),

              // 大偏移量的阴影
              SimpleShadow(
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.orange,
                ),
                opacity: 0.7,
                color: Colors.black,
                offset: Offset(10, 10),
                sigma: 5,
              ),
            ],
          ),
        ),
      ),
    );
  }
}