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?

CodePudding user response：

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),
  ),
),

CodePudding user response：

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

CodePudding user response：

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