skip to Main Content

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

expected result

And here is what I have from my provided code

current view

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


  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
      ),
      ],
      )
    
    Login or Signup to reply.
  2. For you resole more situation.

        Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Expanded(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Icon(Icons.heart_broken),
              Icon(Icons.chat),
              Icon(Icons.send),
            ],
          ),
        ),
        Expanded(child: Container(alignment: Alignment.center, child: Icon(Icons.more_horiz))),
        Expanded(child: Container(alignment: Alignment.centerRight, child: Icon(Icons.flag))),
      ],
    );
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search