Adding shadows to widgets in Flutter - flutter

Question

I was trying to add a border shadow effect to a Container in a way that resembles exactly the same design as in the picture below. My initial idea was of using the CustomPaint class feature to do so. However, it hasn't worked out the way I wanted it to. I would honestly like to know how this can be achieved through the use of the CustomPaint class and I apologize for the code that I've written as I'm still trying to get used to CustomPaint. The code and the pictures are as follows:
This is what I intend to achieve:
This is what I have. You can see that the border goes well beyond where it should be and also, the border at the bottom gets clipped and despite adjusting the bottom padding:
This is the code:
class ProfilePageState extends State<ProfilePage> {
#override
Widget build(BuildContext context) {
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
overlays: [SystemUiOverlay.bottom]);
final height = MediaQuery.of(context).size.height;
final width = MediaQuery.of(context).size.width;
final textScale = MediaQuery.of(context).textScaleFactor * 1.2;
// TODO: implement build
return Scaffold(
body: ListView(
children: [
Container(
height: height * 1,
width: width * 1,
// color: Colors.red,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/filter.png'),
fit: BoxFit.cover)),
child: Column(
......
Padding(
padding: EdgeInsets.only(left: width * 0.035),
child: Container(
width: double.infinity,
height: height * 0.25,
padding: EdgeInsets.only(
left: width * 0.03,
top: height * 0.01,
// bottom: height * 0.01
),
// color: Colors.yellow,
child: ProfilePageFavourite(), //This here is the widget
),
),
],
),
),
],
),
);
}
}
The ProfilePageFavourite widget:
class ProfilePageFavouriteState extends State<ProfilePageFavourite> {
// final List<dynamic> _favouritesList = [
// ];
var favourite = false;
void _onPressed() {
setState(() => favourite = !favourite);
print(favourite);
}
#override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
final height = MediaQuery.of(context).size.height;
final textScale = MediaQuery.of(context).textScaleFactor * 1.2;
// TODO: implement build
return ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) => Stack(
children: [
CustomPaint( //This is where I try using the CustomPaint class
painter: OrangePainter(),
child: Container(
width: width * 0.75,
margin: EdgeInsets.only(right: width * 0.09),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.yellow,
image: DecorationImage(
fit: BoxFit.fitWidth,
image: AssetImage('assets/images/pub screen 1 (1).png'))),
),
),
Positioned(
top: height * 0.16,
child: Container(
height: height * 0.07,
width: width * 0.75,
padding: EdgeInsets.only(top: height * 0.008),
decoration: BoxDecoration(
color: Colors.black38,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20))),
child: Column(
children: [
Row(
// mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.only(left: width * 0.05),
decoration: BoxDecoration(boxShadow: [
BoxShadow(
color: Colors.red,
blurRadius: 35,
spreadRadius: 8,
offset: Offset(0, 2))
]),
child: Image.asset(
'assets/icons/dine.png',
color: Colors.white,
),
),
SizedBox(
width: width * 0.02,
),
Text(
'Sollicitudin',
textScaleFactor: textScale,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20,
shadows: [
Shadow(
color: Colors.red,
blurRadius: 10,
offset: Offset(0, 2))
]),
)
],
),
Container(
width: double.infinity,
// color: Colors.red,
padding: EdgeInsets.only(left: width * 0.118),
child: CustomRatingBar(4.5))
],
),
),
),
Positioned(
left: width * 0.58,
top: height * 0.01,
child: Container(
decoration: BoxDecoration(boxShadow: [
BoxShadow(
color: Colors.pink,
blurRadius: 80,
spreadRadius: 6,
)
]),
child: !favourite
? IconButton(
onPressed: _onPressed,
icon: Icon(
Icons.favorite,
// color: Color.fromRGBO(247, 180, 230, 0.8),
color: Colors.pink,
size: 50,
))
: IconButton(
onPressed: _onPressed,
icon: Icon(
Icons.favorite_border_outlined,
color: Colors.pink,
size: 50,
)),
),
),
],
),
itemCount: 5,
);
}
}
The CustomPaint Class
class OrangePainter extends CustomPainter {
OrangePainter();
#override
void paint(Canvas canvas, Size size) {
final rrectBorder =
RRect.fromRectAndRadius(Offset.zero & size, Radius.circular(12));
final rrectShadow =
RRect.fromRectAndRadius(Offset(0, 2) & size, Radius.circular(12));
final shadowPaint = Paint()
..color = Colors.lightGreen
..style = PaintingStyle.stroke
..strokeWidth = 3
..maskFilter = MaskFilter.blur(BlurStyle.solid, 20);
canvas.drawRRect(rrectShadow, shadowPaint);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
return true;
}
}

Answer 1

I would like to suggest an alternative approach, Custom Paint is very expensive to use in applications. You could instead wrap your container in a Card() then add your shadowColor: Colors.lightGreen set the **shape: ** to the same as your Container() and you should get the result you desire

Answer 2

I have retained the initial customPaint and used it here.This code combines your ProfilePageState and ProfilePageFavourite to give you the appearance below. I've just built it on my phone's dartpad so you can do the editing so it matches. I included comments:
#override
Widget build(BuildContext context) {
return Scaffold(
body: SizedBox(
height: 250,
width: double.infinity,
child: ListView.separated(
scrollDirection: Axis.horizontal,
itemCount: 5,
separatorBuilder: (ctx, index) => const SizedBox(width: 10),
itemBuilder: (ctx, index) => ClipRRect(
child: CustomPaint(
painter: OrangePainter(),
child: Container(
padding: const EdgeInsets.symmetric(horizontal:10,vertical:15),//increase padding to your liking
width: 350,
decoration: BoxDecoration(
// image: DecorationImage(image: AssetImage('')), add your image here and remove color below
color: Colors.black54,
borderRadius: BorderRadius.circular(10),
),
child: Column(
mainAxisAlignment:MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: const [
Icon(Icons.favorite, size: 40),
],
),
Row(
children: [
const Icon(Icons.restaurant),
const SizedBox(width:10),
Column(
children: const [
Text(
'Sollicitudin',
// textScaleFactor: textScale,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20,
shadows: [
Shadow(
color: Colors.red,
blurRadius: 10,
offset: Offset(0, 2))
],
),
),
Icon(Icons.star),//Replace with your CustomRation()
],
),
],
),
],
),
),
),
),
),
),
);
}
}
class OrangePainter extends CustomPainter {
OrangePainter();
#override
void paint(Canvas canvas, Size size) {
final rrectBorder =
RRect.fromRectAndRadius(Offset.zero & size, const Radius.circular(12));
final rrectShadow =
RRect.fromRectAndRadius(const Offset(0, 2) & size, const Radius.circular(12));
final shadowPaint = Paint()
..color = Colors.lightGreen
..style = PaintingStyle.stroke
..strokeWidth = 3
..maskFilter = MaskFilter.blur(BlurStyle.solid, 20);
canvas.drawRRect(rrectShadow, shadowPaint);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
return true;
}
}