1

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]

Improve this question

4 Answers 4

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

13 Comments

Thank you. It works. Can you explain to me how it works?
Hey @CôngHiến Expanded widget automatically take width as per it's flex, and because we are using only 1 expanded widget so it's not necessary to specify how much percent of width it should take, so here in above example all the width will be assign to Expended apart from icons width
Hey @CôngHiến if i my answer meet your requirement, then i would appreciate if you can upvote my answer
Well when I put another Icon in the right end of Row, it has Expanded on the outside has child Align to align the Icon in the bottom right, so it combines with your suggestion perfectly,and not without it. I don't understand why?
Can you share your code what you were trying
|
0

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

Improve this answer

Comments

0 
 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()
            ],
          )
Improve this answer

Comments

0

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)
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.