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

Time:09-06

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

enter image description here

Please help me

CodePudding user response:

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.

CodePudding user response:

Please place your current code and explain briefly what you want to do like putting an example of what you want to do so we can understand easily and help you!

anyway you play around mainAxisAlignment as well as CrossAxisAlignment to get what you want!

When I understand what exactly you want to do I will help you to do it.

CodePudding user response:

Use

Expanded(child: SizedBox());

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

  • Related