Circular BoxDecoration shadow gets cut in a box shape on web, not on mobile

Question

I'm trying to display a circular image with a shadow, but on Flutter web, the shadow gets cut at the edges, while working fine on mobile.

Minimum code to reproduce is:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          scrollDirection: Axis.horizontal,
          children: [
            Column(
              children: <Widget>[
                Container(
                    width: 100,
                    height: 100,
                    decoration: BoxDecoration(
                        boxShadow: [
                          BoxShadow(color: Colors.black, blurRadius: 12.0),
                        ],
                        shape: BoxShape.circle,
                        image: DecorationImage(
                            fit: BoxFit.fill,
                            image: NetworkImage(
                                'https://images.theconversation.com/files/93616/original/image-20150902-6700-t2axrz.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1000&fit=clip')))),
              ],
            )
          ],
        ),
      ),
    );
  }
}

I tried adding padding to the container but it didn't help, not sure what else to do.

Solution

Quick workaround - Add one more container on top and set it as transparent with your fixed size. color: Colors.transparent

This makes it draw the entire container therefore not clipping it's child container, so you can add padding to the child and make enough space for the shadows.

Container(
  width: 100,
  height: 100,
  color: Colors.transparent,
  child: Padding(
    padding: const EdgeInsets.all(15.0),
    child: Container(
        decoration: BoxDecoration(
            boxShadow: [
          BoxShadow(color: Colors.black, blurRadius: 12.0),
        ],
            shape: BoxShape.circle,
            image: DecorationImage(
                fit: BoxFit.fill,
                image: NetworkImage(
                    'https://images.theconversation.com/files/93616/original/image-20150902-6700-t2axrz.jpg')))),
  ),
),

Reference: https://github.com/flutter/flutter/issues/32215#issuecomment-596143172

Comments

[Mohith7548]

Try to use CircleAvatarr() widget