I am trying to add a box shadow over a widget that displays an image. Whenever I include the box-shadow within the parent container, the shadow is only shown on the container which is stacked behind the child image. How can I have the shadow be displayed for the child image?
import 'package:flutter/material.dart';
import 'package:flutter_course_app_4/pages/nft_post.dart';
class NFTIconTemplate extends StatelessWidget {
final String NFTImg;
NFTIconTemplate({required this.NFTImg});
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
child: InkWell(
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(4.0, 4.0),
blurRadius: 15.0,
spreadRadius: 1.0),
],
color: Colors.grey[800],
),
child: Column(
children: [
Image.network(
NFTImg,
width: 120,
height: 160,
fit: BoxFit.cover,
),
],
),
),
onTap: () {
print('Clicked NFT Icon');
Navigator.push(
context, MaterialPageRoute(builder: (context) => nftPost()));
},
),
),
);
}
}
CodePudding user response:
Try this code to get extra shade to your code,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
bottomLeft: Radius.circular(12),
bottomRight: Radius.circular(12)),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.6),
spreadRadius: 8,
blurRadius: 6,
offset: Offset(0, 4),
),
],
),