图标上方和下方带有文本的按钮

Question

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.

Answer 1

Try this way

child: RaisedButton(
          shape: Border.all(width: 2.0),
          onPressed: _onPressed,
          child: Stack(
            children: <Widget>[
              Align(
                alignment: Alignment.center,
                child: Icon(Icons.home),
              ),
              Align(
                alignment:
                    isInverted ? Alignment.bottomCenter : Alignment.topCenter,
                child: Text("home"),
              )
            ],
          ),
        )

Also suggested by @ishaan

Answer 2

Try this:

Stack(
  children: <Widget>[
    Padding(
      padding: const EdgeInsets.all(18.0),
      child: Icon(Icons.access_alarm),
    ),
    Positioned(
      child: Text("Test"),
      left: 15,
      bottom: isInverted?0:null,
      top: !isInverted?0:null,
    )
  ],
),