Drop Shadow Effect In Flutter
Some of the time you want to apply a shadow effect on your application. How should you have such an effect if you’re using Flutter?. A plugin called DropShadow is proper hence. DropShadow is a plugin that applies a picture as well as a widget moreover.
In this blog, we will explore Drop Shadow Effect In Flutter. We will see how to implement a demo program of the drop shadow and how to use the Drop Shadow effect for any widget using the drop_shadow package in your flutter applications.
drop_shadow | Flutter Package
It’s a drop shadow effect not only for images but also for any widget in Flutter.pub.dev
Table Of Contents::
Introduction:
Drop Shadow effect for any image as well as any widget also. The below demo screenshot shows how to use a drop shadow in a flutter. It shows how the drop shadow will work using the drop_shadow package in your flutter applications. It shows a shadow effect on the networking image, assets image, container widget, and text widget. It will be shown on your device.
Demo Module :
Constructor:
To utilize DropShadow, you need to call the constructor underneath:
const DropShadow({
Key? key,
required this.child,
this.blurRadius = 10.0,
this.borderRadius = 0.0,
this.offset = const Offset(0.0, 8.0),
this.opacity = 1.0,
this.spread = 1.0,
})
All fields marked with @required must not be empty in the above Constructor.
Parameters:
There are some parameters of DropShadow are:
- > child — This parameter is used to the widget can only have one child. To layout multiple children, let this widget’s child be a widget such as Row, Column, or Stack, which have a children property, and then provide the children with that widget.
- > blurRadius — This parameter is used to the blur size of the shadow (default: 10.0).
- > borderRadius —This parameter is used to the BorderRadius to the image and the shadow (default: 0.0).
- > offset — This parameter is used to the position of the shadow (default: Offset(0.0, 8.0)).
- > opacity — This parameter is used to the given opacity to the shadow (default: 1.0).
- > spread — This parameter is used for the size of the shadow (default: 1.0).
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
flutter:
sdk: flutter
drop_shadow: ^0.0.1+4
Step 2: Add the assets
Add assets to pubspec — yaml file.
assets:
- assets/
Step 3: Import
import 'package:drop_shadow/drop_shadow.dart';
Step 4: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In the main.dart file, we will create a HomePage() class. In this class, we will make some DropShadow demo. First, we will create a network image and wrap it in the DropShadow() widget. Inside the widget, we add default blurRadius, add Offset(3, 3), and the size of the shadow.
DropShadow(
blurRadius: 10,
offset: const Offset(3, 3),
spread: 1,
child: Image.network(
'https://images.unsplash.com/photo-1651794327243-d976672943c2?crop=entropy&cs=tinysrgb&fm='
'jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto='
'format&fit=crop&w=1974',
width: 280,
),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Next, we will add the DropShadow() widget. In this widget, we will add an assets image from the assets folder with height and width. Drop Shadow gives a shadow effect on this image.
DropShadow(
child: Image.asset('assets/logo.png',height: 140,
width: 280,),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Now, we will create a Container widget. In this widget, we will add the height and width of the container. Also, add border-radius and gradient colors in the BoxDecoration. The whole widget is wrapped into its DropShadow() widget.
DropShadow(
child: Container(
height: 145,
width: 280,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: const LinearGradient(
colors: [Color(0xFFEC3DEC), Color(0xFF73C5ED)],
),
),
),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Last but not least, we will a text “Flutter Devs” and wrap it to it DropShadow() widget. They give a shadow effect on a text also.
const DropShadow(
child: Text(
"Flutter Dev's",
style: TextStyle(fontSize: 40, fontWeight:FontWeight.bold,color: Colors.cyan),
),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:drop_shadow/drop_shadow.dart';
import 'package:flutter/material.dart';
import 'package:flutter_drop_shadow_demo/splash_screen.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Splash(),
debugShowCheckedModeBanner: false,
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Flutter Drop Shadow Effect Demo"),
centerTitle: true,
automaticallyImplyLeading: false,
backgroundColor: Colors.teal,
),
body: Center(
child: SingleChildScrollView(
child: Column(
children: [
DropShadow(
blurRadius: 10,
offset: const Offset(3, 3),
spread: 1,
child: Image.network(
'https://images.unsplash.com/photo-1651794327243-d976672943c2?crop=entropy&cs=tinysrgb&fm='
'jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto='
'format&fit=crop&w=1974',
width: 280,
),
),
DropShadow(
child: Image.asset('assets/logo.png',height: 140,
width: 280,),
),
DropShadow(
child: Container(
height: 145,
width: 280,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: const LinearGradient(
colors: [Color(0xFFEC3DEC), Color(0xFF73C5ED)],
),
),
),
),
const DropShadow(
child: Text(
"Flutter Dev's",
style: TextStyle(fontSize: 40, fontWeight:FontWeight.bold,color: Colors.cyan),
),
),
],
),
),
),
);
}
}
Conclusion:
In the article, I have explained the Drop Shadow Effect’s basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Drop Shadow Effect On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Drop Shadow Effect in your flutter projects. We will show you what the Introduction is?. Some drop shadow effect parameters, make a demo program for working Drop Shadow Effect. The Drop Shadow effect for any widget or any image using the drop_shadow package in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
