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.

How to align single widgets in Flutter?

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?

Answer 1

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