Flutter：在 Row Widget 中将特定子元素居中对齐

Question

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]

Answer 1

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

Answer 2

在该行中，您可以在范围内提供一个SizedBox(width: )以将特定小部件推送一定距离。

Answer 3

 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()
            ],
          )

Answer 4

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)