CODEWITHSUNDEEP
dartflutterwidgeticons
Floris Marpepa
Floris Marpepa

Reputation: 2081

Rendering issue while centering Font Awesome icon

I don't understand why this FAB doesn't center it's child. I've tried different things but cannot make it to center perfectly. Because adding for example padding only bottom to the icon could make it center on a Device but maybe not for all. this is my code

Theme(
  data: Theme.of(context).copyWith(
      highlightColor: Colors.red, splashColor: Colors.red),
  child: SizedBox(
    height: MediaQuery.of(context).size.height / 7,
    width: MediaQuery.of(context).size.height / 7,
    child: FloatingActionButton(
        elevation: 100,
        shape: new CircleBorder(
            side: new BorderSide(
                color: Colors.black, width: 5.0)),
        backgroundColor: Colors.orangeAccent,
        onPressed: () {},
        child: new Icon(
          FontAwesomeIcons.chevronUp,
          size: 80,
        )),
  ),
),

and this is the not centered FAB with it's icon child.

enter image description here

does it seems only to me that the icon isn't centered?

Upvotes: 1

Views: 1505

Answers (1)

mirkancal
mirkancal

Reputation: 5355

Same code with Icons.person

Icons.person

same code with Text widget

Text Widget

Same code with chevronCircleUp

chevronCircleUp

I've used Show Debug Paint by the way. And I've used chevronCircleUp, just to see clearly the area of widget. I think you are right, it's not centered enough, however, this examples made me think that the problem is related to FontAwesome icons.

There are also this issues

Font Icon Render Box not large enough for some characters

Rectangular icons are centered incorrectly

So I've applied the workaround on the first issue, here is the code. It must be good enough now.

Theme.of(context)
              .copyWith(highlightColor: Colors.red, splashColor: Colors.red),
          child: SizedBox(
              height: MediaQuery.of(context).size.height / 7,
              width: MediaQuery.of(context).size.height / 7,
              child: FloatingActionButton(
                elevation: 100,
                shape: new CircleBorder(
                    side: new BorderSide(color: Colors.black, width: 5.0)),
                backgroundColor: Colors.orangeAccent,
                onPressed: () {},
                child: Text(
                    String.fromCharCode(
                        FontAwesomeIcons.chevronUp.codePoint),
                    style: TextStyle(
                        fontSize: 72.0,
                        fontFamily: FontAwesomeIcons.chevronUp.fontFamily,
                        package: FontAwesomeIcons.chevronUp.fontPackage)),
              )),
        ),

chevronUp

Edit after 3 years:

Issue still exists with Material icon (Icons.ios_share) on Flutter 2.10.0

issue

Upvotes: 7

Related Questions