How to prevent box shadow from being cut off? - css

Question

I just started learning Dart and Flutter development and have been playing with BoxShadow.
As you can see in the image below, the shadow for the Bar, Boo and Faz cards are cutoff while that for the text box shows up.
How do I ensure the shadows for the cards show up correctly?
Here's my code:
import 'package:flutter/material.dart';
import 'package:reminder_app/constants.dart';
class Body extends StatelessWidget {
Widget _buildBanner(size) {
return Container(
height: size.height * 0.7,
decoration: BoxDecoration(
color: kPrimaryColor,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(36),
bottomRight: Radius.circular(36),
),
),
);
}
Widget _buildCard(text) {
return Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.teal[200],
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
offset: Offset(10, 10),
blurRadius: 25,
color: Colors.black.withOpacity(
0.75,
),
),
],
),
child: Text(text),
);
}
Widget _buildCardGrid() {
return Expanded(
child: GridView.count(
primary: false,
padding: EdgeInsets.symmetric(
vertical: kDefaultPadding * 1.5,
),
crossAxisSpacing: 20,
mainAxisSpacing: 20,
crossAxisCount: 2,
children: <Widget>[
_buildCard("Foo"),
_buildCard("Bar"),
_buildCard("Baz"),
_buildCard("Boo"),
_buildCard("Far"),
_buildCard("Faz"),
],
),
);
}
Widget _buildInputBox() {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
offset: Offset(10, 10),
blurRadius: 25,
color: Colors.black.withOpacity(
0.75,
),
),
],
),
height: 55,
child: TextField(
decoration: InputDecoration(
hintText: "Text Here",
hintStyle: TextStyle(
color: kPrimaryColor.withOpacity(
0.5,
),
),
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
),
),
);
}
Widget _buildInteractionContainers(size) {
return Positioned(
child: Container(
margin: EdgeInsets.symmetric(
horizontal: kDefaultPadding * 2,
),
width: size.width,
child: Column(
children: [
_buildInputBox(),
_buildCardGrid(),
],
),
),
);
}
Widget _buildBody(size) {
return SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
height: size.height * 0.7,
child: Stack(
children: <Widget>[
_buildBanner(size),
_buildInteractionContainers(size),
],
),
),
],
),
);
}
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return _buildBody(size);
}
}
Bar, Boo and Faz's shadows are cutoff while the shadow for the text box shows up
Edit [Answer]: I was able to fix this by adding clipBehavior: Clip.none to GridView to prevent shadow clipping.

Answer 1

Please try this code, To How to prevent box-shadow from being cut off?
If the box-shadow is muted, make sure that
overflow: visible
Is set to all div tags that contain your element.
I hope this information will be useful to you.
Thank you.