Problem
I have a Flutter widget with a Container that has a BoxShadow. The shadow disappears intermittently when I interact with a GridView inside one of its child widgets. Sometimes it works fine, sometimes the shadow vanishes when I click to show the grid.
I have two nearly identical widgets (ApartmentAdditionalDetails and HouseAdditionalDetails) with the same structure, but the issue only occurs consistently in one of them(ApartmentAdditionalDetails).
class ApartmentAdditionalDetails extends StatelessWidget {
const ApartmentAdditionalDetails({super.key});
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.rp),
boxShadow: [kPrimaryBoxShadow],
),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 16.wp),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 16.hp),
const OtherRoomsField(),
const FurnishedStatusOptional(), // This contains the GridView
const ParkingSelector(),
const AmenitiesFields(),
// ... more fields
],
),
),
);
}
}
class FurnishedStatusOptional extends StatefulWidget {
final bool isOptional;
const FurnishedStatusOptional({super.key, this.isOptional = true});
@override
State createState() =>
FurnishedStatusOptionalState();
}
class FurnishedStatusOptionalState extends State {
Set selectedFurnishedStatus = {};
Map checkBoxItems = {
'Sofa': false,
'Curtains': false,
'RO System': false,
// ... more items
};
@override
Widget build(BuildContext context) {
return FormField>(
builder: (FormFieldState> fieldState) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// ... chips for selection
if (selectedFurnishedStatus.contains("Fully-furnished") ||
selectedFurnishedStatus.contains("Semi-furnished"))
_buildFurnishedDetails(fieldState),
],
);
},
);
}
Widget _buildFurnishedDetails(FormFieldState fieldState) {
return Column(
children: [
// ... some counter widgets
GridView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 8.wp,
mainAxisSpacing: 8.hp,
mainAxisExtent: 20.hp,
),
itemCount: checkBoxItems.length,
itemBuilder: (context, index) {
String name = checkBoxItems.keys.elementAt(index);
return InkWell(
onTap: () {
setState(() {
checkBoxItems[name] = !checkBoxItems[name]!;
});
fieldState.didChange(selectedFurnishedStatus);
},
child: Row(
children: [
Checkbox(
value: checkBoxItems[name],
onChanged: (val) {
setState(() => checkBoxItems[name] = val ?? false);
fieldState.didChange(selectedFurnishedStatus);
},
),
Text(name),
],
),
);
},
),
],
);
}
}
What I've Tried
Added clipBehavior: Clip.none to GridView - didn't work
Wrapped GridView with Material(color: Colors.transparent) - didn't work
Added RepaintBoundary around GridView - didn't work
Used Material widget with elevation instead of Container - works but changes shadow appearance (not acceptable)
Added clipBehavior: Clip.none to parent Container - didn't work
Questions
Why does the BoxShadow disappear when the GridView is interacted with?
Why does this happen in ApartmentAdditionalDetails but not consistently in HouseAdditionalDetails even though they're nearly identical?
How can I preserve the exact BoxShadow appearance while fixing this clipping/rendering issue?