Flutter - 图像阴影效果

Question

我正在研究一个应用程序概念，当我创建线框和 Photoshop 模板时，我想知道这种效果是否可以使用 flutter 重新创建。

我不想使用纯色，而是想使用图像中的颜色。这种效果有特定的名称吗？

在此示例中，阴影的左侧区域保持米色，而右侧区域看起来呈粉红色。

Answer 1

最近我在 flutter 上做了drop_shadow_image包用于投影，你可以看一下下面的实现。您还可以在此处找到 GitHub 存储库的链接。

安装

1. 将其添加到您的包的pubspec.yaml文件中：

dependencies:
  drop_shadow_image: ^0.9.0

2. 将包导入到 dart 文件中：

import 'package:drop_shadow_image/drop_shadow_image.dart';

例子

import 'dart:ui';

import 'package:drop_shadow_image/drop_shadow_lib.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body:
        Center(
          child: DropShadowImage(
            offset: Offset(10,10),
            scale: 1,
            blurRadius: 12,
            borderRadius: 20,
            image: Image.asset('assets/cat.png',
            width: 300,),
          ),
        )
      ),
    );
  }
}

类的属性

1. Key key
 
2. double scale  // Size to parent. 

3. Offset offset  // Position of shadow. (dx) for horizontal displacement (dy) for vertical displacement.

4. double blurRadius // Amount of blur in the shadow. 0 means no blur.

5. double borderRadius //  border radius of image

6. Image image (@required) // The image.

截屏