I'm working on an app concept and as I was creating a wireframe and photoshop template I was wondering if this effect is recreateable using flutter.
Instead of taking a solid color I'd like to use the colors from the image instead. Does this effect have a certain name?
In this example the left area of the shadow stays beige, while the right side looks pink.
Recently I made drop_shadow_image package on flutter for the drop shadow you can take a look at the implementation below. also you can find the link to GitHub repo here.
pubspec.yaml file:dependencies:
drop_shadow_image: ^0.9.0
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.
