Flutter: How to align widget to the topRight of column?

Question

I'm trying to align my more options button to the top right corner in in my column, according to the this SO answer.

Here's my code.

return Card(
      color: Colors.blueAccent,
      child: Container(
        height: 100,
        width: 350,
        child: Column(
          children: <Widget>[
            Text(
              'Day ${widget._dayNumber}',
              style: TextStyle(
                color: Colors.white,
              ),
            ),
            Align(alignment: Alignment.topRight,
             child: IconButton(onPressed: () {}, icon: Icon(Icons.more_vert),)),

          ],
        ),
      ),
    );

And if I change the order of align and text, this happens.

I want to display my button on the top right corner while keeping Text widget on the center top, but align widget seems to take whole line(row).

Is there a way to do correctly achieve that, or do I need to wrap them both in a row?

score 13 · Accepted Answer · answered Mar 20 '19 at 11:27

I've used Stack and Positioned widget to achieve that effect.

Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Card(
          color: Colors.blueAccent,
          child: Container(
            height: 100,
            width: 350,
            child: Column(
              children: <Widget>[
                Text(
                  'Day ${widget._dayNumber}',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ),
        ),
        Positioned(
          top: 0,
          right: 0,
          child: IconButton(
            onPressed: () {},
            icon: Icon(Icons.more_vert),
          ),
        ),
      ],
    );
  }

Another option for a widget instead of Positioned with two properties set to `0` is to use an `Align` and set the `alignment` property to `topRight` — Jonas, Dec 06 '19 at 18:05

score 6 · Answer 2 · answered Mar 20 '19 at 11:21

You need to wrap with Row if you want to make them in the same Column

  return Card(
    color: Colors.blueAccent,
    child: Container(
      height: 100,
      width: 350,
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Container(),
              Text(
                'Day 1',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
              IconButton(
                onPressed: () {},
                icon: Icon(Icons.more_vert),
              ),
            ],
          ),
        ],
      ),
    ),
  );

Flutter: How to align widget to the topRight of column?

2 Answers2