Home > database >  Icon moves down in a column
Icon moves down in a column

Time:06-14

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),
              ),
            ),
          ],
        ),
      )
  • Related