Flutter align one children in column to extreme right and others on center

Question

Could you please help me to align one element in column to extreme right.

Please help me

please provide more details with your own code implementation. No one here can help you without proper information in question. I am confused on about what you want. Please edit question with more brief — Md. Kamrul Amin, Sep 06 '22 at 09:25

eamirho3ein · Accepted Answer · 2022-09-06T10:55:27.997

Wrap that icon with Align and set alignment to centerRight , like this:

 IntrinsicHeight(
        child: Row(
          children: [
            Expanded(
              child: Column(
                children: [
                  Align(
                    alignment: Alignment.centerRight,
                    child: Icon(
                      Icons.info,
                      size: 20,
                    ),
                  ),
                  Icon(Icons.lock_clock),
                  Text('item 1'),
                ],
              ),
            ),
            VerticalDivider(
              color: Colors.black,
            ),
            Expanded(
              child: Column(
                children: [
                  Align(
                    alignment: Alignment.centerRight,
                    child: Icon(
                      Icons.info,
                      size: 20,
                    ),
                  ),
                  Icon(Icons.lock_clock),
                  Text('item 1'),
                ],
              ),
            ),
            VerticalDivider(
              color: Colors.black,
            ),
            Expanded(
              child: Column(
                children: [
                  Align(
                    alignment: Alignment.centerRight,
                    child: Icon(
                      Icons.info,
                      size: 20,
                    ),
                  ),
                  Icon(Icons.lock_clock),
                  Text('item 1'),
                ],
              ),
            ),
          ],
        ),
      )

Or If you want that icon attach to top right of column in overlay, you can wrap the column wit stack widget and set that icon in it, like this:

IntrinsicHeight(
            child: Row(
              children: [
                Expanded(
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: Column(
                          children: [
                            Icon(Icons.lock_clock),
                            Text('item 1'),
                          ],
                        ),
                      ),
                      Positioned(
                        child: Icon(
                          Icons.info,
                          size: 20,
                        ),
                        top: 0,
                        right: 0,
                      )
                    ],
                  ),
                ),
                VerticalDivider(
                  color: Colors.black,
                ),
                Expanded(
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: Column(
                          children: [
                            Icon(Icons.lock_clock),
                            Text('item 1'),
                          ],
                        ),
                      ),
                      Positioned(
                        child: Icon(
                          Icons.info,
                          size: 20,
                        ),
                        top: 0,
                        right: 0,
                      )
                    ],
                  ),
                ),
                VerticalDivider(
                  color: Colors.black,
                ),
                Expanded(
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: Column(
                          children: [
                            Icon(Icons.lock_clock),
                            Text('item 1'),
                          ],
                        ),
                      ),
                      Positioned(
                        child: Icon(
                          Icons.info,
                          size: 20,
                        ),
                        top: 0,
                        right: 0,
                      )
                    ],
                  ),
                )
              ],
            ),
          )

This make icon closer to column.

Many thanks for you response. Unfortunately I don’t have my laptop with me now. That’s why I couldn’t post my code. In the column i want to add another icon on top and align to extreme right. That’s where i am struggling with. Thanks — fazilSizzlers, Sep 06 '22 at 10:43

score 1 · Answer 2 · answered Sep 06 '22 at 09:24

1

Use

Expanded(child: SizedBox());

Before the wudget that you want to move in the most right

answered Sep 06 '22 at 09:24

Gwhyyy

7,554
3
8
35

Flutter align one children in column to extreme right and others on center

2 Answers2