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
CodePudding user response:
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,
),
),
),
),
)