I would suggest using background images because it's simpler, but if you really insist on not using them, here is an example of how to do it without background image:
class Sample extends StatelessWidget {
const Sample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(20)),
child: Container(
height: 60,
width: 250,
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [Colors.green, Colors.yellow],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
),
child: RawMaterialButton(
onPressed: () {},
splashColor: Colors.green,
child: Stack(
children: [
Container(
alignment: Alignment.centerLeft,
padding: const EdgeInsets.only(left: 20),
child: const Text(
'Login',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
Positioned(
right: 5,
top: -80,
height: 100,
width: 100,
child: Container(
decoration: const ShapeDecoration(
color: Colors.green,
shape: CircleBorder(),
),
),
),
Positioned(
right: -40,
top: -65,
height: 100,
width: 100,
child: Container(
decoration: ShapeDecoration(
color: Colors.brown.withOpacity(.9),
shape: const CircleBorder(),
),
),
),
],
),
),
),
),
),
);
}
}
[![enter image description here][1]][1]
P.S. feel free to adjust the `color`s and `height/width` values to your needs.
[1]: https://i.stack.imgur.com/MK6cv.png
Thanks to all of the above answers I'd like to share something that may come in handy in some certain cases. So lets see what happens when you use `Positioned:( right: 0.0, left:0.0, bottom:0.0)` :
Padding(
padding: const EdgeInsets.all(4.0),
child: Stack(
children: <Widget>[
Positioned(
bottom: 0.0,
right: 0.0,
left: 0.0,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Container(
color: Colors.blue,
child: Center(
child: Text('Hello',
style: TextStyle(color: Color(0xffF6C37F),
fontSize: 46, fontWeight: FontWeight.bold),),
)
),
)
),
],
),
),
This would be the output of the above code:
[![enter image description here][1]][1]
As you can see it would fill the whole width with the container even though you don't want it and you just want the container to wrap its children. so for this you can try trick below:
Padding(
padding: const EdgeInsets.all(4.0),
child: Stack(
children: <Widget>[
Positioned(
bottom: 0.0,
right: 0.0,
left: 0.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Container(
color: Colors.blue,
child: Text('Hello',
style: TextStyle(color: Color(0xffF6C37F),
fontSize: 46, fontWeight: FontWeight.bold),)
),
),
Container(),
],
)
),
],
),
),
[![enter image description here][2]][2]
[1]: https://i.stack.imgur.com/9r284.png
[2]: https://i.stack.imgur.com/2k888.png
