CODEWITHSUNDEEP
flutterflutter-layout
Công Hiến
Công Hiến

Reputation: 17

Flutter : align center a specific child in a Row Widget

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]

Upvotes: 1

Views: 1912

Answers (4)

Harish Sharma
Harish Sharma

Reputation: 1549

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

Upvotes: 2

Davis
Davis

Reputation: 1417

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)

Upvotes: 0

Sadhik
Sadhik

Reputation: 300

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

Upvotes: 0

Sulaymon Ne'matov
Sulaymon Ne'matov

Reputation: 448

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

Upvotes: 0

Related Questions