How to get shadow outside of a container in flutter

Question

I want to add an outer shadow into a button, but the shadow is filling the whole button. Following is how I want the button to look.

This is how it actually looks:

Following is the code:

Container(
       width: (width != null ? width / 2 : 300 / 2) - 2,
        height: 35,
        decoration: BoxDecoration(
                boxShadow: selectedState == "EveryWeek"
                      ? customThemeProvider.isLuminescenceTheme
                            ? [
                              BoxShadow(
                                  color: Color(0xffCEA6F8),
                                  blurRadius: 5,
                                  spreadRadius: 0.02,
                                  offset: Offset(0.1, 0.1)),
                              BoxShadow(
                                  color: Color(0xff6E2DF9),
                                  blurRadius: 5,
                                  spreadRadius: 0.2,
                                  offset: Offset(0.1, 0.1)),
                                ]
                               : null
                      : customThemeProvider.isLuminescenceTheme
                               ? null
                                 : null,
...

How do I get the outer shadow?

Try my answer [here](https://stackoverflow.com/a/68856967/13997210) hope its help to you, I think try to use 2nd way in that answer — Ravindra S. Patil, Mar 25 '22 at 08:22

score 1 · Answer 1 · answered Mar 25 '22 at 08:22

I think this is matching pretty well. You can always adjust the details:

Container(
  padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.deepPurpleAccent,
        spreadRadius: 2,
        offset: Offset(0, 0),
      ),
    ],
    color: Colors.deepPurple[900],
  ),
  child: Text(
    'Monthly',
    style: TextStyle(color: Colors.white),
  ),
),

score 0 · Answer 2 · answered Mar 25 '22 at 08:35

Try below code hope its help to you.

Container(
  height: 50,
  width: 150,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    gradient: LinearGradient(
      colors: [
        Color(0xffCEA6F8),
        Color(0xff6E2DF9),
      ],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
  ),
  child: Card(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
     child: Container(
      alignment: Alignment.center,
      child: Text(
        'Monthly',
      ),
    ),
  ),
),

Your Result screen->

Full Example:

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50,
      width: 150,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        gradient: LinearGradient(
          colors: [
            Color(0xffCEA6F8),
            Color(0xff6E2DF9),
          ],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
      ),
      child: Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
         child: Container(
          alignment: Alignment.center,
          child: Text(
            'Monthly',
          ),
        ),
      ),
    );
  }
}

Refer my answer here also

You can test your code on Dartpad

score 0 · Answer 3 · answered Mar 25 '22 at 09:08

If by shadow you don't mean the shadow made by elevation, you can create the style you want using gradient but it needs a little trick, because you should wrap a container in another one. Here is a sample:

import 'package:flutter/material.dart';

class TestScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.black,
        body: SafeArea(
            child: Center(
          child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    const Color(0xffa983f5),
                    const Color(0xff6E2DF9),
                  ]),
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(8),
                bottomRight: Radius.circular(8),
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.all(2.0),
              child: Container(
                child: Padding(
                  padding: const EdgeInsets.symmetric(
                    vertical: 16.0,
                    horizontal: 64,
                  ),
                  child: Text(
                    'Monthly',
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),
                decoration: BoxDecoration(
                  color: const Color(0xFF0E0132), //Colors.deepPurple.shade900,
                  borderRadius: BorderRadius.only(
                    topRight: Radius.circular(8),
                    bottomRight: Radius.circular(8),
                  ),
                ),
              ),
            ),
          ),
        )));
  }
}

How to get shadow outside of a container in flutter

3 Answers3

Linked