I have this problem, I want the icon on top and the text down. I'm trying using a column but while the text is ok, the icon moves down as you can see in the pic https://i.stack.imgur.com/DI4g2.png
I tried many ways but i'm stuck here. Thank you in advance
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container( // added only to highlight with red
color: Colors.red,
child: Icon(
getIconDataLuna(fase),
size: 90,
),
),
const SizedBox(
height: 15,
),
Text(
fase,
style: const TextStyle(fontSize: 17),
),
],
),
CodePudding user response:
Try positioning icon with Position Widget like this:
Container(
color: Colors.grey,
width: 200,
height: 200,
child: Stack(
alignment: AlignmentDirectional.center,
children: <Widget>[
Positioned(
bottom: 100.0,
child: Icon(Icons.receipt,
size: 90.0, color: Colors.greenAccent[400]), //Icon
),
const SizedBox(
height: 15,
),
const Positioned(
bottom: 0,
child: Text(
"fase",
style: TextStyle(fontSize: 17),
),
),
],
),
)