Row with 2 children icon and (Expanded) text (a long one) space between them

Question

I have a row with 2 children in a row an icon(location) and text

here is sample image

              Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Icon(
                      Icons.location_on,
                      color: Colors.white,
                    ),
                    Expanded(
                      child: Text(
                        "Kyla Olsen Ap #651-8679 Sodales Av.Tamuning PA 10855 (492) 709-6392", //  a long address
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 16,
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                  ],
                ),

This has some space between icon and text. If I align text start then it does not have space but second line also start from start, I want text in center

I want location iocn and text to not have any space like phone number or email address.

score 0 · Answer 1 · answered Jun 11 '20 at 18:14

Quick fix, change you Expanded Widget wrapping your Text to a Flexible Widget like so:

Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Icon(
                      Icons.location_on,
                      color: Colors.white,
                    ),
                    Flexible(
                      child: Text(
                        "Kyla Olsen Ap #651-8679 Sodales Av.Tamuning PA 10855 (492) 709-6392", //  a long address
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 16,
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                  ],
                ),

Flexible is giving same effect as Expanded – Sunny Jun 11 '20 at 22:02 — Sunny, Jun 11 '20 at 22:02
Have you given Netnichaa method a try yet? – Chichebe Jun 11 '20 at 22:57 — Chichebe, Jun 11 '20 at 22:57

score 0 · Answer 2 · answered Jun 11 '20 at 19:03

It is like this because Expanded widget is expanding a width of widget to be as max as possible be for start a new line for text. You can check it by assign colour into container widget to see the size of each container like this:

As you can see that the container of text(the green one) is expanded and causing a space between an icon and text.

To temporary fix this problem you can just set:

textAlign: TextAlign.center, -> textAlign: TextAlign.left,

Or you can just change it into a column like this

Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Icon(
                  Icons.location_on,
                  color: Colors.white,
                ),
                Text(
                  "Kyla Olsen", // split some short text here
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 16,
                      fontWeight: FontWeight.bold),
                ),
              ],
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.only(left: 10.0), //Based on icon size, I assume that it is 10px
                child: Text(
                  "Ap #651-8679 Sodales Av.Tamuning PA 10855 (492) 709-6392", //  a long address
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 16,
                      fontWeight: FontWeight.bold),
                ),
              ),
            ),
          ]
        ),

and the out put will be like this

I know that it is a dumb solution but it does work.

I want address to use as minimum line as possible. btw nice hack :) — Sunny, Jun 11 '20 at 22:04

Row with 2 children icon and (Expanded) text (a long one) space between them

2 Answers2