title: How to prevent box shadow from being cut off?
body: <p>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?</p>
  <p>Here's my code:</p>
  <pre><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: &lt;Widget&gt;[
            _buildCard(&quot;Foo&quot;),
            _buildCard(&quot;Bar&quot;),
            _buildCard(&quot;Baz&quot;),
            _buildCard(&quot;Boo&quot;),
            _buildCard(&quot;Far&quot;),
            _buildCard(&quot;Faz&quot;),
          ],
        ),
      );
    }
  
    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: &quot;Text Here&quot;,
            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: &lt;Widget&gt;[
            Container(
              height: size.height * 0.7,
              child: Stack(
                children: &lt;Widget&gt;[
                  _buildBanner(size),
                  _buildInteractionContainers(size),
                ],
              ),
            ),
          ],
        ),
      );
    }
  
    @override
    Widget build(BuildContext context) {
      Size size = MediaQuery.of(context).size;
      return _buildBody(size);
    }
  }
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/HtkUz.png" rel="nofollow noreferrer">Bar, Boo and Faz's shadows are cutoff while the shadow for the text box shows up</a></p>
  <p>Edit [Answer]: I was able to fix this by adding <code>clipBehavior: Clip.none</code> to GridView to prevent shadow clipping.</p>