I'm a newbie in flutter and I'm trying to code a UI Instagram clone, How can I align a carousel indicator to the center with a Row() parent like this

Stack(
 alignment: Alignment.center,
children:[
buildIndicator(),
//Icon section
Row(
children:[
buildLeftIcons(),
buildRightIcon(),
],
),
],
),

Result I got: ![final result][this]

CodePudding user response：

Hey you can use Spacer() between icons and dot in row children . Spacer widget auto take extra width like below -

Row(
  children: [
     Icon(),   
     Icon(),   
     Icon(),  
     Spacer(),
     DotsIndicator(),
     Spacer(), 
  ],
),

Here is another example with Expanded widget and row, Expanded will automatically take rest of width other then icons

Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
         Icon(),   
         Icon(),   
         Icon(),  
         Expanded(
           child: Center(
             child: DotsIndicator(),
           )
         ),
      ],
    ),

// UI with left and right icons

Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
         Icon(),   
         Icon(),   
         Icon(),  
         Expanded(
           child: Center(
             child: DotsIndicator(),
           )
         ),
        Icon(),  
      ],
    ),
 

For you reference - Spacer and Expanded

CodePudding user response：

In the row, you can give a SizedBox(width: ) in the range to push a specific widget a certain distance.

CodePudding user response：

 Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  ///put favourite,comment,send icon here
                ],
              ),
              ///put yor indicator widget here
              Indicator(),
              ///add an empty container here
              Container()
            ],
          )

CodePudding user response：

It would somehow complex to do that but I have two suggestions:

1. Use Row()'s MainAxisAlignment.start then add a desired Widget in between the first widgets and the indicators to give space say like a SizedBox(width:80.0)
2. Separate the two widgets by using Column(). I prefer this since I would just add the carousel indicator as first item in the column then wrap it in a Center() widget, then the second widget in the column would be your desired widgets(favourite, message and comments icons)