How to get shadow outside of a container in flutter - 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?

Answer 1

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

Answer 2

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

Answer 3

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