2

I'm trying to make a widget achieve the following effect:

Image

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.

1
  • 1
    Try using a stack. Set the icon as a background, and the text on either top or bottom of the column using the MainAxisAlignment values. That way, the icon is always centered and the text will fall wherever you want it to.
    – ishaan
    Apr 20, 2019 at 10:30

2 Answers 2

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

2
  • Modify to use the isInverted bool so that you can flip the home up and down as op has asked. Should be something like isInverted?Align(alignment: Alignment.bottomCenter,):Align(alignment: Alignment.topCenter,) , seems like this is what op wants.
    – ishaan
    Apr 20, 2019 at 10:37
  • yup exactly what op wants
    – primo
    Apr 20, 2019 at 10:38
1

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

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.