Flutter - Wrap text with overflow.elipsis, it won't work like the way i want

Question

this is my code for the text section for that elipsis

         Padding(
              padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
              child: Row(
                children: [
                  Flexible(
                    flex: 10,
                    child: Container(
                      padding: const EdgeInsets.only(right: 13.0),
                      child: const Text(
                        '\$ 900.000.000',
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                          fontSize: 18,
                          color: Colors.red,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                  const Flexible(
                    flex: 3,
                    child: Icon(
                      Icons.favorite_border_outlined,
                    ),
                  ),
                ],
              ),
            ),

i'm trying to create an line that will show price that look like below this.

$ 2.000.00....

but turn out its comeout like this

and i already tried to use this reference and it's still wont work Flutter - Wrap text on overflow, like insert ellipsis or fade i want the text still gather with other without having space like this was a long text loooooooooooooooooooooooooooooooooooooooong <- this one

Answer 1

Padding(
              padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
              child: Row(
                children: [
                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.only(right: 13.0),
                      child: const Text(
                        '\$ 900.000.000',
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                          fontSize: 18,
                          color: Colors.red,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                
                   Icon(
                      Icons.favorite_border_outlined,
                    ),
                 
                ],
              ),
            ),

Answer 2

TextOverflow.ellipsis checks for a "\u2026" to clip the text. You can replace that with a "\u{200B}"

 child: Padding(
                padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
                child: Row(
                  children: [
                    Flexible(
                      flex: 10,
                      child: Container(
                        padding: const EdgeInsets.only(right: 13.0),
                        child: Text(
                          ('\$ 900.000.000').replaceAll("", "\u{200B}"),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            fontSize: 18,
                            color: Colors.red,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                    const Flexible(
                      flex: 3,
                      child: Icon(
                        Icons.favorite_border_outlined,
                      ),
                    ),
                  ],
                ),
              ),