try this way
```
Container(
width: 200,
height: 100,
decoration: BoxDecoration(
// Outer border: 2px thick, gray stroke
border: Border.all(
color: Color.fromRGBO(227, 235, 254, 1),
width: 5.0,
style: BorderStyle
.solid, // Change to BorderStyle.none if no border needed
),
// Rounded corners matching common UI images (e.g., 12px radius)
borderRadius: BorderRadius.circular(12.0),
// Optional: Add a subtle shadow for depth (like in many designs)
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 8.0,
offset: const Offset(0, 4),
),
],
// Optional: Background color or gradient inside the border
color: Colors.white,
// Or for a gradient fill: gradient: LinearGradient(colors: [Colors.blue.shade50, Colors.white]),
),
child: const Center(
child: Text(
'Your Content Here',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
),
),
),
```
You can use the below code to make a rounded button with a gradient color.
Container(
width: 130.0,
height: 43.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
gradient: LinearGradient(
// Where the linear gradient begins and ends
begin: Alignment.topRight,
end: Alignment.bottomLeft,
// Add one stop for each color. Stops should increase from 0 to 1
stops: [0.1, 0.9],
colors: [
// Colors are easy thanks to Flutter's Colors class.
Color(0xff1d83ab),
Color(0xff0cbab8),
],
),
),
child: FlatButton(
child: Text(
'Sign In',
style: TextStyle(
fontSize: 16.0,
fontFamily: 'Righteous',
fontWeight: FontWeight.w600,
),
),
textColor: Colors.white,
color: Colors.transparent,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
onPressed: () {
},
),
);
