how to stack image to show in the background - flutter

Question

Please pardon me to post this.
i am working with this design more that 3 days now i can i get the actual design. all my effort design is been rejected.
i am trying to create this design.
the problem i have is the right and left box showing at the back of the image.
thanks in advance.
here is my code
Container(
child: Card(
shape:RoundedRectangleBorder(borderRadius:
BorderRadius.circular(25.0),
),
semanticContainer:true,
clipBehavior:
Clip.antiAliasWithSaveLayer,
child:Image(image:
NetworkImage(snapshot.data.docs[index].data()['picture'], ),
fit: BoxFit.cover,), ),),);

Answer 1

Scaffold(
body: Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Colors.pinkAccent,
Colors.yellowAccent,
],
),
),
child: Stack(
children: [
Positioned(
left: 70,
// right: 40,
top: 40,
child: Transform.rotate(
angle: pi - 3.30,
child: Container(
// transform: ,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.white.withOpacity(0.2),
),
height: 200,
width: 150,
),
),
),
Positioned(
left: 130,
// right: 150,
top: 78,
child: Transform.rotate(
angle: pi + 3.30,
child: Container(
// transform: ,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.white.withOpacity(0.6),
),
height: 190,
width: 150,
),
),
),
Positioned(
left: 0,
right: 0,
top: 50,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 100.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.white,
image: DecorationImage(
image: NetworkImage("https://picsum.photos/200/300"),
fit: BoxFit.fill
),
),
height: 220,
width: 100,
),
),
),
],
),
),
);

Answer 2

Result
If you like change, black shadow play with stops inside gradient. hope you will get the idea of doing it.
stops: [.5, 1.0],
To AlignWidgte change this valuealignment: Alignment(-1, -1),. For rotation change here. Better use slider or from dart:math use pi.
Transform.rotate(angle: -.166,
Code snippet
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
get imageWidth => 300;
get imageHeight => 450;
double sliderVal = 0.0;
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
buttonTheme: ButtonThemeData(
textTheme: ButtonTextTheme.primary,
),
),
home: Scaffold(
body: Column(
children: [
Slider(
value: sliderVal,
onChanged: (v) {
setState(() {
sliderVal = v;
print(sliderVal);
});
}),
Container(
width: imageWidth * 1.4,
height: imageHeight * 1.1,
child: Stack(
children: [
Align(
alignment: Alignment(-1, -1),
child: Transform.rotate(
angle: -.166,
child: backImage(color: Colors.blue),
),
),
Align(
alignment: Alignment(1, 1),
child: Transform.rotate(
angle: .128,
child: backImage(color: Colors.yellow),
),
),
Center(
child: mainImage(),
),
],
),
),
],
),
),
// CustomSS(),
);
}
backImage({required Color color, double? width, double? height}) {
return Container(
width: width ?? imageWidth,
height: height ?? imageHeight,
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(12),
),
);
}
SizedBox mainImage() {
return SizedBox(
width: imageWidth,
height: imageHeight,
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Stack(
fit: StackFit.expand,
children: [
Image.asset(
"assets/me.jpg",
fit: BoxFit.cover,
),
Container(
decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(12),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [.5, 1.0],
colors: [
Colors.transparent,
Colors.black87,
],
),
),
),
Positioned(
bottom: 30,
left: 30,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
Text(
"Yeasin",
style: TextStyle(
fontSize: 22,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
SizedBox(
width: 8,
),
Text(
"XX",
style: TextStyle(
fontSize: 22,
color: Colors.white,
),
)
],
),
SizedBox(
height: 10,
),
Text(
"Description",
style: TextStyle(
fontSize: 14,
color: Colors.white,
),
),
]),
)
],
),
));
}
}