I’m creating Instagram clone app and I want to create a view like Instagram post. I want my carousel indicator in the center of my row while a group of button such as like or comment to the left and the last one to the right.
I tried this code; however, my carousel is not in the center of my row.
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
children: [
IconButton(
onPressed: () {},
icon: Image.asset(
'assets/icons/like_icon.png',
width: iconSize,
height: iconSize,
),
),
IconButton(
onPressed: () {},
icon: Image.asset(
'assets/icons/comment_icon.png',
width: iconSize,
height: iconSize,
),
),
IconButton(
onPressed: () {},
icon: Image.asset(
'assets/icons/message_icon.png',
width: iconSize,
height: iconSize,
),
),
],
),
const Spacer(),
Expanded(
child: CarouselIndicator(
count: widget.postEntity.content.length,
index: _currentIndex,
color: Colors.grey,
activeColor: Colors.blue,
width: 6,
height: 6,
),
),
const Spacer(),
const Icon(Icons.abc)
],
)
This is my expected result
And here is what I have from my provided code
As you can see, my carousel indicator is deviated to the right of my row.
I wonder if there are any ways to achieve my requirement.
2
Answers
You just need to set
MainAxisAlignment
tospaceBetween
and use a Stack to put the centered carousel icon exactly in the center:For you resole more situation.