Flutter阴影效果插件shadows的使用

Flutter阴影效果插件shadows的使用

工作进度

该插件目前处于开发阶段。它提供了对阴影的多种操作功能。

参考文档

BoxShadowUtils 扩展类

• BoxShadowUtils 提供了对 BoxShadow 的扩展方法，用于通过 copyWith 操作阴影。
• copyWith 方法用于替换 BoxShadow 属性。
• "Multiply" this BoxShadow by a Color 未实现。
• "Multiply" this blurRadius by a num 未实现。
• "Add" to this spreadRadius a double smudgeSpread 可以增加阴影的扩散半径。
• "Subtract" from this spreadRadius a double squishSpread 可以减少阴影的扩散半径。
• "Modulate" this offset by Offset offsetScale 可以调整阴影的偏移量。

BoxShadowsUtils 扩展类

• BoxShadowsUtils 提供了对 List<BoxShadow> 的扩展方法，用于批量操作阴影。
• colorize 方法可以为 List<BoxShadow> 添加单个颜色或颜色列表，并可选择保留原透明度。
• rampOpacity 方法可以为 List<BoxShadow> 设置透明度渐变，可以选择同时改变颜色。

Elevation 类

• Elevation 类提供了静态方法来简化生成 BoxDecoration 的过程，从 Flutter 的顶层 kElevationToShadow 获取阴影。
• asBoxShadows(double elevation, {Color? color}) 方法根据高度生成阴影列表。
• asBoxDecoration(double elevation, {Color? color}) 方法根据高度生成带有阴影的 BoxDecoration。

ElevationUtils 扩展类

• ElevationUtils 提供了对 List<BoxShadow> 的扩展方法。
• materialize 方法将标准的材料阴影透明度映射应用到 List<BoxShadow> 上。

示例

Elevation 示例

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Shadows Example')),
        body: Center(
          child: Container(
            width: 100,
            height: 100,
            decoration: Elevation.asBoxDecoration(2),
            child: Center(child: Text('Elevation 2')),
          ),
        ),
      ),
    );
  }
}

ElevationUtils 示例

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ElevationUtils Example')),
        body: Center(
          child: Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(blurRadius: 4.0, color: Colors.black),
                BoxShadow(blurRadius: 8.0, color: Colors.grey),
              ],
            ).materialize(),
            child: Center(child: Text('ElevationUtils Materialize')),
          ),
        ),
      ),
    );
  }
}

BoxShadowUtils 示例

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('BoxShadowUtils Example')),
        body: Center(
          child: Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(blurRadius: 4.0, color: Colors.black).copyWith(spreadRadius: 2.0),
              ],
            ),
            child: Center(child: Text('BoxShadowUtils CopyWith')),
          ),
        ),
      ),
    );
  }
}

BoxShadowsUtils 示例

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('BoxShadowsUtils Example')),
        body: Center(
          child: Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(blurRadius: 4.0, color: Colors.black),
                BoxShadow(blurRadius: 8.0, color: Colors.grey),
              ].colorize(Colors.red),
            ),
            child: Center(child: Text('BoxShadowsUtils Colorize')),
          ),
        ),
      ),
    );
  }
}