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?
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),
),
),
],
);
}
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),
),
],
),
],
),
),
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.