Home > Back-end >  Flutter: How can I add a box shadow to this widget?
Flutter: How can I add a box shadow to this widget?

Time:02-19

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,

This is how the shadow will be, if you add this decoration to your container.

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),
              ),
            ],
          ),
  • Related