Flutter: How to make widget always above shadow - flutter

Question

I have an app with two containers next to each other/above each other with Row()/Column() widgets accordingly. Both containers have drop shadows in their box decoration parameter. If they are close to each other the one on the top/left casts a shadow on the other one.
Is there a way I can make a widget not have shadows drawn on it?
Edit: here is an example of what I mean.
I don't want the first container to have a shadow from the second container but rather have both containers above the shadows.
Here is the code for this sample: you can copy paste it into dartpad.dev for quick testing.
import 'package:flutter/material.dart';
final Color darkBlue = Colors.grey[200]!;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Row(
children: [
SizedBox(width: 20),
Container(
height: 100,
width: 300,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [BoxShadow(
blurRadius: 20,
color: Colors.black.withOpacity(0.6)
)]
),
),
Container(
height: 100,
width: 300,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [BoxShadow(
blurRadius: 20,
color: Colors.black
)]
),
),
]
),
),
),
);
}
}

Answer 1

if they both have their own shadows, I guess there is no way to accomplish what you want.
an alternative way could be, giving the shadow to the parent, here is the example code:
import 'package:flutter/material.dart';
final Color darkBlue = Colors.grey[200]!;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(blurRadius: 20, color: Colors.black),
],
),
child: Row(
children: [
Expanded(
child: Container(
height: 100,
width: 300,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(width: .2),
),
),
),
Expanded(
child: Container(
height: 100,
width: 300,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(width: .2),
),
),
),
],
),
),
),
),
);
}
}
I wrapped each of them with Expanded, to make sure to fill the parent.