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

1.4k Views Asked by At

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

enter image description here

Please help me

2

There are 2 best solutions below

2
eamirho3ein On BEST ANSWER

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

enter image description here

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

enter image description here

This make icon closer to column.

0
Gwhyyy On

Use

Expanded(child: SizedBox());

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