Reputation: 359
I need to show 2 widgets in my stack widget.
I am doing like this
Stack(
children: [
Container(
width: Width * 0.7,
height: 75,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white
),
child: Row(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Shop Name Here',style: TextStyle(
color: Colors.red,
fontFamily: 'PoppinsMedium',
fontSize: 14)),
Text('Welcome Back',style: TextStyle(
color: Colors.red,
fontFamily: 'PoppinsRegular',
fontSize: 12)),
],
),
Image.asset('images/Avatar.png')
],
),
),
Positioned(
left: 0,
child: Container(width: 100, height: 60, color: Colors.white,
child: Image.asset('images/Icons- Main App Icon.png')
))
],
),
I have giving position to left 0 but its showing in side the first container
Its showing like this
You can see this the ++ 2 icons are showing on the container. I need to show it like this
My question is how can i show position container on half left on first container ?
Upvotes: 1
Views: 1209
Reputation: 787
I did it with the following build
method, feel free to play around and ask to optimize it for your needs:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.orangeAccent,
body: Container(
padding: EdgeInsets.symmetric(vertical: 50),
child: Stack(
children: [
Positioned(
left: 70,
child: Container(
alignment: Alignment.centerRight,
width: MediaQuery.of(context).size.width * 0.7,
height: 90,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.yellowAccent),
child: Padding(
padding: const EdgeInsets.all(24.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.min,
children: [
Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Shop Name Here',
style:
TextStyle(color: Colors.red, fontSize: 14)),
Text('Welcome Back',
style:
TextStyle(color: Colors.red, fontSize: 12)),
],
),
Image.asset('images/Avatar.png')
],
),
),
),
),
Positioned(
left: 20,
top: 10,
child: Container(
height: 70,
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.blueGrey),
padding: EdgeInsets.all(24),
child: Image.asset('images/Icons- Main App Icon.png'),
)),
],
),
),
);
}
I wrapped your other Container
with a Positioned
widget, added some Padding
, updated some height
and weight
attributes.
The final outcome is something like this: https://i.sstatic.net/CGaRb.png
Upvotes: 2