How to make these two (shown in the picture) float over the card in that way (aligning slightly out of the card border).
this is the widget code
Card( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(20), ), elevation: 3, //color: Colors.orange, child: Container(width: 140, height: 140, child: Image.asset('assets/c1.png', scale:1,), ), ),
The code below was used to create this. The red card can be an image instead and positioned accordingly.
Stack(
overflow: Overflow.visible,
children: [
Positioned(
top: 10,
right: -20,
child: Card(
elevation: 3,
color: Colors.red.withOpacity(0.5),
child: Container(width: 30, height: 50),
)),
Card(
elevation: 1,
color: Colors.purple,
child: Container(
width: 250,
height: 250,
),
),
Positioned(
top: 20,
left: -20,
child: Card(
elevation: 3,
color: Colors.orange,
child: Container(width: 80, height: 80),
)),
Positioned(
top: 20,
right: -20,
child: Card(
elevation: 3,
color: Colors.red,
child: Container(width: 120, height: 50),
))
],
)
Try the Stack class - looks like you want to arrange widgets on top of each other.