I'm trying to make a widget achieve the following effect:
It's a button that shows a icon on the middle and text above or below the icon depending if it's inverted or not.
I did the following to add the icon and the text to the button:
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
isInverted
? Icon(Icons.access_alarm)
: Text("Test")
isInverted
? Padding(padding: EdgeInsets.only(top: 20))
: Padding(padding: EdgeInsets.only(top: 20)),
isInverted
? Text("Test")
: Icon(Icons.access_alarm),
isInverted
? Padding(padding: EdgeInsets.only(top: 0))
: Padding(padding: EdgeInsets.only(bottom: 20)),
],
),
The problem is that the buttons aren't symmetric.
It works fine if the button isn't inverted but if it is the icon isn't centered.
And maybe there is a solution without using any padding.
MainAxisAlignment
values. That way, the icon is always centered and the text will fall wherever you want it to.