Search code examples
flutterdartflutter-layoutflutter-rowflutter-column

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


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

enter image description here

Please help me


Solution

  • 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.