Flutter Positioning Stack Complex Design - flutter

Question

I am struggling with this, How Can I achieve this design? My code included stack widget with container background image but it's not showing properly.
I tried and it's showing like bellow image,
I want to design exactly like first image, I am stucking on positioning of small camera icon, background image, buy now banner etc, here's my code-
Stack(
children: [
Container(
decoration: new BoxDecoration(
// color: Colors.transparent,
image: new DecorationImage(
fit: BoxFit.fill,
image: new AssetImage(
'images/icons/egle2.png',
),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
children: [
Stack(
alignment: Alignment.topCenter,
children: [
Container(
height: 100,
width: 100,
),
Positioned(
// right: 1.0,
child: Material(
elevation: 8.0,
color: Colors.blue,
shape: CircleBorder(),
child: CircleAvatar(
maxRadius: 50,
minRadius: 40,
backgroundColor: Colors.transparent,
backgroundImage: AssetImage(
'images/icons/jully.png'),
),
),
),
// SizedBox(
// width: 20,
// ),
Positioned(
right: 0.0,
top: 0.0,
child: Align(
alignment: Alignment.topRight,
child: Image.asset(
'images/icons/camera.png',
// height: ,
// width: 25,
),
),
),
],
),
SizedBox(
height: 5,
),
Text(
'Jully',
style: TextStyle(
color: Colors.white, fontSize: 18),
),
SizedBox(
height: 5,
),
GestureDetector(
onTap: null,
child: Container(
padding: EdgeInsets.all(5),
height: 25,
// width: 30,
decoration: BoxDecoration(
color: UniversalVariables.yellowColor,
borderRadius: BorderRadius.circular(4),
),
child: Row(
children: [
Icon(
Icons.card_giftcard,
size: 15,
),
SizedBox(
width: 2,
),
Text(
'ID: 123875',
style: TextStyle(fontSize: 12),
),
],
),
),
),
SizedBox(
height: 200,
),
],
),
Column(
children: [
Stack(
alignment: Alignment.topCenter,
children: [
Container(
height: 100,
width: 100,
),
Positioned(
right: 1.0,
child: Material(
elevation: 8.0,
color: Colors.blue,
shape: CircleBorder(),
child: CircleAvatar(
maxRadius: 50,
minRadius: 40,
backgroundColor: Colors.transparent,
backgroundImage:
AssetImage('images/icons/king.png'),
),
),
),
SizedBox(
width: 20,
),
Positioned(
right: 0.0,
top: 0.0,
child: Align(
alignment: Alignment.topRight,
child: Image.asset(
'images/icons/camera.png',
// height: ,
// width: 25,
),
),
),
],
),
SizedBox(
height: 5,
),
Text(
'King_20',
style: TextStyle(
color: Colors.white, fontSize: 18),
),
SizedBox(
height: 5,
),
GestureDetector(
onTap: null,
child: Container(
padding: EdgeInsets.all(5),
height: 25,
// width: 30,
decoration: BoxDecoration(
color: UniversalVariables.yellowColor,
borderRadius: BorderRadius.circular(4),
),
child: Row(
children: [
Icon(
Icons.card_giftcard,
size: 15,
),
SizedBox(
width: 2,
),
Text(
'ID: 123875',
style: TextStyle(fontSize: 12),
),
],
),
),
),
],
),
Column(
children: [
Stack(
alignment: Alignment.topCenter,
children: [
Container(
height: 100,
width: 100,
),
Positioned(
right: 1.0,
child: Material(
elevation: 8.0,
color: Colors.blue,
shape: CircleBorder(),
child: CircleAvatar(
maxRadius: 50,
minRadius: 40,
backgroundColor: Colors.transparent,
backgroundImage:
AssetImage('images/icons/hulk.png'),
),
),
),
SizedBox(
width: 20,
),
Positioned(
// top: 5.0,
right: 0.0,
child: Container(
child: Image.asset(
'images/icons/camera.png',
// height: ,
// width: 25,
),
),
),
],
),
SizedBox(
height: 5,
),
Text(
'Hulk',
style: TextStyle(
color: Colors.white, fontSize: 18),
),
SizedBox(
height: 5,
),
GestureDetector(
onTap: null,
child: Container(
padding: EdgeInsets.all(5),
height: 25,
// width: 30,
decoration: BoxDecoration(
color: UniversalVariables.yellowColor,
borderRadius: BorderRadius.circular(4),
),
child: Row(
children: [
Icon(
Icons.card_giftcard,
size: 15,
),
SizedBox(
width: 2,
),
Text(
'ID: 123875',
style: TextStyle(fontSize: 12),
),
],
),
),
),
SizedBox(
height: 200,
),
// Stack(
// alignment: Alignment.topCenter,
// children: [
// Container(
// height: 100,
// width: 100,
// ),
// Positioned(
// right: 1.0,
// child: Material(
// elevation: 8.0,
// color: Colors.blue,
// shape: CircleBorder(),
// child: CircleAvatar(
// maxRadius: 50,
// minRadius: 40,
// backgroundColor: Colors.transparent,
// backgroundImage: AssetImage(
// 'images/icons/happyman.png'),
// ),
// ),
// ),
// SizedBox(
// width: 20,
// ),
// Positioned(
//// top: 5.0,
// right: 0.0,
// child: Container(
// child: Image.asset(
// 'images/icons/camera.png',
//// height: ,
//// width: 25,
// ),
// ),
// ),
// ],
// ),
// SizedBox(
// height: 5,
// ),
// Text(
// 'Happy Man',
// style: TextStyle(
// color: Colors.white, fontSize: 18),
// ),
// SizedBox(
// height: 5,
// ),
// GestureDetector(
// onTap: null,
// child: Container(
// padding: EdgeInsets.all(5),
// height: 25,
//// width: 30,
// decoration: BoxDecoration(
// color: UniversalVariables.yellowColor,
// borderRadius: BorderRadius.circular(4),
// ),
// child: Row(
// children: [
// Icon(
// Icons.card_giftcard,
// size: 15,
// ),
// SizedBox(
// width: 2,
// ),
// Text(
// 'ID: 123875',
// style: TextStyle(fontSize: 12),
// ),
// ],
// ),
// ),
// ),
],
),
],
),
),
Positioned.fill(
top: 280,
child: Container(
color: Colors.yellow,
height: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(left: 20),
child: Container(
child: Row(
children: [
Image.asset('images/icons/badge4.png',),
SizedBox(width: 10,),
Text(
"X 70 = \$10",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold),
),
],
),
),
),
Padding(
padding: const EdgeInsets.only(right: 20),
child: GestureDetector(
onTap: null,
child: Container(
padding: EdgeInsets.all(8),
height: 35,
// width: 30,
decoration: BoxDecoration(
color: UniversalVariables.blackColor,
borderRadius: BorderRadius.circular(4),
),
child: Row(
children: [
Text(
'Buy Now',
textAlign: TextAlign.center,
style:
TextStyle(color: Colors.white),
),
],
),
),
),
),
],
),
),
),
],
),

Answer 1

As usual, there might be better examples on how to achieve this result.
Here's a fast attempt to recreate it. It needs some fine tuning to fit any screen size, using AutoSizeText and rewriting PersonDrawer to be responsive too.
But I hope that it will help you to move in the right direction.
class MySuperCoolStackWidget extends StatelessWidget {
final double baseWidth = 520.0;
final double baseHeight = 345.0;
double fromWidth(double size, BoxConstraints constraints) {
return size / baseWidth * constraints.maxWidth;
}
double fromHeight(double size, BoxConstraints constraints) {
return size / baseHeight * constraints.maxHeight;
}
#override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: baseWidth / baseHeight,
child: LayoutBuilder(
builder: (context, constraints) {
return Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.black,
),
),
AspectRatio(
aspectRatio: 520.0 / 260.0,
child: Container(
padding: EdgeInsets.fromLTRB(
fromWidth(20.0, constraints),
fromHeight(40.0, constraints),
fromWidth(20.0, constraints),
fromHeight(20.0, constraints),
),
child: LayoutBuilder(
builder: (_, innerConstraints){
return Row(
children: <Widget>[
Expanded(
child: PersonDrawer(),
),
SizedBox(
width: fromWidth(20.0, constraints),
),
Expanded(
child: Transform.translate(
offset: Offset(0.0, innerConstraints.maxHeight / 2.0),
child: PersonDrawer(),
),
),
SizedBox(
width: fromWidth(20.0, constraints),
),
Expanded(
child: PersonDrawer(),
),
],
);
},
),
),
),
Positioned(
left: 0,
right: 0,
bottom: fromHeight(20.0, constraints),
child: AspectRatio(
aspectRatio: 520.0 / 65.0,
child: Container(
padding: EdgeInsets.symmetric(
vertical: fromHeight(16.0, constraints),
horizontal: fromWidth(32.0, constraints),
),
color: Colors.orange[400],
child: Row(
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Icon(Icons.local_florist),
Text('x 70 = \$10'),
],
),
),
RaisedButton(
color: Colors.black,
textColor: Colors.white,
onPressed: () {},
child: Text('Buy now'),
),
],
),
),
),
),
],
);
},
),
);
}
}
class PersonDrawer extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.white10,
border: Border.all(color: Colors.white12),
borderRadius: BorderRadius.circular(10.0),
),
child: Column(
children: <Widget>[
Expanded(
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
padding: EdgeInsets.all(10.0),
child: AspectRatio(
aspectRatio: 1.0,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
),
),
),
Positioned(
top: 5.0,
right: 5.0,
child: Icon(
Icons.camera,
color: Colors.white,
),
),
],
),
),
SizedBox(height: 5.0),
Container(
padding: EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
Text(
'King_20',
style: TextStyle(
color: Colors.white,
),
),
SizedBox(height: 5.0),
Container(
padding: EdgeInsets.all(2.0),
decoration: BoxDecoration(
color: Colors.orange[400],
borderRadius: BorderRadius.circular(5.0),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.perm_identity, size: 10.0),
Text(
'ID: 1234567',
style: TextStyle(
fontSize: 10.0,
),
),
],
),
),
],
),
)
],
),
);
}
}