Flutter : align center a specific child in a Row Widget

user_13664170 0
Viewed 77

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]

flutter-layout flutter
4 Answers

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

user_75572230

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

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

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)
user_106981000
Related