Flutter - 图像阴影效果

Question

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

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

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

Answer 1

最近我做了drop_shadow_image package on flutter for drop shadow 你可以看看下面的实现。您还可以找到指向 GitHub 存储库的链接 here .

安装

1. 将此添加到您的包的 pubspec.yaml 文件中:

dependencies:
  drop_shadow_image: ^0.9.0

1. 将包导入到您的 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.

截图