Flutter - Font Awesome 图标溢出文本

Question

I'm using FontAwesomeIcon Plugin in my application.

Some Icons from FontAwesomeIcon plugin are overlap with Text widget like below Image.

I can solve this problem by adding some width between Text and Icon, but that is not good. so how to solve this problem.

I need like this Image.

here i'm not adding any width between icon and text.

Code:

Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Icon(
                      Icons.trip_origin,
                      color: Colors.white,
                    ),
                    Text(
                      'TP-23',
                      style: TextStyle(color: Colors.white),
                    )
                  ],
                ),
                Row(
                  children: <Widget>[
                    Icon(
                      FontAwesomeIcons.idCard,
                      color: Colors.white,
                    ),
                    Text(
                      'TP-23',
                      style: TextStyle(color: Colors.white),
                    )
                  ],
                )
              ],
            ),

Answer 1

Are you looking like this ?

Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Icon(
                      Icons.trip_origin,
                      color: Colors.white,
                    ),
                    SizeBox(width:10) //as per your requirement
                    Text(
                      'TP-23',
                      style: TextStyle(color: Colors.white),
                    )
                  ],
                ),
                Row(
                  children: <Widget>[
                    Icon(
                      FontAwesomeIcons.idCard,
                      color: Colors.white,
                    ),
                    SizeBox(width:10) //as per your requirement
                    Text(
                      'TP-23',
                      style: TextStyle(color: Colors.white),
                    )
                  ],
                )
              ],
            ),

Answer 2

Why don't you just use the Padding widget ( https://api.flutter.dev/flutter/widgets/Padding-class.html ) like this

ADD PADDING TO THE LEFT AND RIGHT TO THE ICON WIDGET

Row(
  children: <Widget>[
    Padding(
      padding: EdgeInsets.symmetric(horizontal: 16.0)
      child: Icon(
        Icons.trip_origin,
        color: Colors.white,
      ),
    ),
    Text(
      'TP-23',
      style: TextStyle(color: Colors.white),
    )
  ]
)

ADD PADDING ONLY TO THE RIGHT TO THE ICON WIDGET

Row(
  children: <Widget>[
    Padding(
      padding: EdgeInsets.only(right: 16.0)
      child: Icon(
        Icons.trip_origin,
        color: Colors.white,
      ),
    ),
    Text(
      'TP-23',
      style: TextStyle(color: Colors.white),
    )
  ]
)

Answer 3

    child: Container(
                  child: Container(
                    height: 500.0,
                    width: 500.0,
                    // alignment: FractionalOffset.center,
                    child: Stack(
                      //alignment:new Alignment(x, y)
                      children: <Widget>[
                        Icon(
                          Icons.trip_origin,
                          size: 40.0,
                          color: Colors.orange,
                        ),
                        Positioned(
                          top: 15.00,
                          left: 40.0,
                          child: Text(
                            'TP-23',
                            style: TextStyle(
                                color: Colors.white, fontSize: 25.0),
                          ),
                        )
                      ],
                    ),
                  ),
                ),

Answer 4

As stated in this answer, you need to wrap your FontAwesomeIcon into an FaIcon rather than a simple Icon .

Your snippet would be:

FaIcon(
  FontAwesomeIcons.idCard,
  color: Colors.white,
)