How to center only one element in a row of 3 elements in flutter

Question

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 this is the actual result:

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.

Answer 1

You just need to set MainAxisAlignment to spaceBetween and use a Stack to put the centered carousel icon exactly in the center:

  Stack(
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(children: [
            Icon(Icons.add_home),
            Icon(Icons.add_home),
            Icon(Icons.add_home),
            
          ],),
            
            Icon(Icons.add_home),
            
        ],
      ),
  Center( 
    child:Icon(Icons.camera_outdoor_sharp), // this is the carousel icon
  ),
  ],
  )