Rendering issue while centering Font Awesome icon

前提是你 提交于 2021-01-29 14:34:34

问题


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.

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


回答1:


Same code with Icons.person

same code with Text widget

Same code with 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)),
              )),
        ),



来源:https://stackoverflow.com/questions/54932743/rendering-issue-while-centering-font-awesome-icon

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!