Flutter：我怎样才能给这个小部件添加一个盒子阴影？

Question

我正在尝试在显示图像的小部件上添加框阴影。每当我在父容器中包含 box-shadow 时，阴影仅显示在堆叠在子图像后面的容器上。如何让子图像显示阴影？

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()));
          },
        ),
      ),
    );
  }
}

Answer 1

尝试使用此代码为您的代码添加更多阴影，

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

Flutter：我怎样才能给这个小部件添加一个盒子阴影？

Flutter: How can I add a box shadow to this widget?

image

flutter