Flutter: How to make widget always above shadow

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
                  )]
                ),
              ),
            ]
          ),
        ),
      ),
    );
  }
}

user_12555423 · Answer

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.

Flutter: How to make widget always above shadow

1 Answers