BoxShadow is spreading over full screen width in flutter

Issue

I am trying to add a boxShadow to a Container but the BoxShadow is spreading over full width of screen instead of width of Sized Box. For futher explanation Container is a child of a SizedBox and SizedBox is in Column the crossAxisAlignment of the Column is stretch. The code is given below.

class _AudioDetailsState extends State<AudioDetails> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar(heading: "Audio Player"),
      body: SafeArea(
        child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                  colors: [Colors.blue, Colors.blue.shade50],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter),
            ),
            padding: const EdgeInsets.all(10),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                ClipOval(
                  child: SizedBox(
                    height: 150,
                    width: 150,
                    child: Container(
                        height: 125,
                        width: 125,
                        decoration: BoxDecoration(boxShadow: [
                          BoxShadow(
                            blurRadius: 5,
                            color: Colors.grey.withOpacity(0.5),
                            spreadRadius: 5,
                          )
                        ]),
                        child: const CircleAvatar(
                          backgroundColor: Colors.amber,
                        )),
                  ),
                )
              ],
            )),
      ),
    );
  }
}

And the current image of the output is given below

Solution

This is occur because of crossAxisAlignment value, using CrossAxisAlignment.stretch will stretches children across the cross axis.

the docs says "If a child wants a different size from its parent and the parent doesn’t have enough information to align it, then the child’s size might be ignored. Be specific when defining alignment."

To fix this you can either use other crossAxisAlignment value and provide the device width to the parent Container

Container(
  width: MediaQuery.of(context).size.width,
  child: Column(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
  ClipOval(
  ...

Or warp the child with Align

 Align(
   child: ClipOval(
      child: SizedBox(
            height: 150,
            width: 150,
            child: Container(
                height: 125,
                width: 125,
                decoration: BoxDecoration(boxShadow: [
                  BoxShadow(
                     blurRadius: 5,
                     color: Colors.grey.withOpacity(0.5),
                     spreadRadius: 5,
                   )
                   ]),
                 child: const CircleAvatar(
                          backgroundColor: Colors.amber,
                        ),
                      ),
                    ),
                  ),
                )

Answered By - 7mada