Mainaxis alignment.spacebetween is not working.flutter - flutter

Question

Widget stack(BuildContext context, image, title, subtitle, height) {
return Stack(
clipBehavior: Clip.none,
children: [
Positioned(
top: createSize(57, context, fromHeight: true),
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: Icon(Icons.arrow_back),
onPressed:(){},
),SizedBox(width: createSize(300, context),),
Text('Skip'),
],
),
),
),
Positioned(
left: createSize(16, context),
top: createSize(109, context, fromHeight: true),
// height: createSize(height, context),
// width: createSize(width, context),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: TextStyle(
fontSize: createSize(22, context),
color: Colors.black,
fontWeight: FontWeight.w600),
),
Text(
subtitle,
style: TextStyle(
color: Color.fromRGBO(159, 159, 159, 1),
fontSize: createSize(12, context)),
),
],
),
),
Container(
height: height,
width: createSize(375, context),
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage(image), fit: BoxFit.cover),
),
),
],
);
}
Mainaxis alignment.spacebetween is not working.
I am creating a page but mainaxisAlignment.spaceBetween is not working. It works just fine if the row is not inside stack .Both the buttons are sticked to each other at the start of the row. How can I solve this?

Answer 1

Just remove Positioned from first children and give device width as a width of container
Here is your updated code
Widget stack(BuildContext context, image, title, subtitle, height) {
return Stack(
clipBehavior: Clip.none,
children: [
Container(
width: MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: Icon(Icons.arrow_back),
onPressed:(){},
),SizedBox(width: createSize(300, context),),
Text('Skip'),
],
),
),
Positioned(
left: createSize(16, context),
top: createSize(109, context, fromHeight: true),
// height: createSize(height, context),
// width: createSize(width, context),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: TextStyle(
fontSize: createSize(22, context),
color: Colors.black,
fontWeight: FontWeight.w600),
),
Text(
subtitle,
style: TextStyle(
color: Color.fromRGBO(159, 159, 159, 1),
fontSize: createSize(12, context)),
),
],
),
),
Container(
height: height,
width: createSize(375, context),
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage(image), fit: BoxFit.cover),
),
),
],
);
}
If you don't give a proper width to container then it's consider it's width as per content.