How to solve: wrap text in flutter

Question

Asked by Deepak on November 08, 2021 (source).

I want text with location icon in last in row, When my location text will be sort then it should be in last in that row and when location text will be long then it should be wrap text and show dotted,

I want text with location icon in last in row, When my location text will be sort then it should be in last in that row and when location text will be long then it should be wrap text and show dotted,

how to do it,

locationView() {
    return Padding(
      padding: const EdgeInsets.fromLTRB(16, 20, 16, 0),


      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  bellazTitle("Hey, Emily", 22),
                ],
              ),
              SizedBox(width: 10,),
              Container(
                // width: MediaQuery.of(context).size.width-160,
                child: Row(
                  // mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Image.asset(
                      "lib/Assets/location.png",
                      height: 22,
                      width: 16,
                    ),
                    featureName == null
                        ? Container()
                        : Padding(
                            padding: const EdgeInsets.only(left: 8.0),
                            child: Column(
                              children: [
                                Container(
                                  // color: Colors.red,
                                  // width: MediaQuery.of(context).size.width-190,
                                  child: Text(
                                    // "${featureName}, ${locality}",
                                    "as fhf sdfghj xchjk sdfghjk dfghjk zj ",
                                    style: TextStyle(
                                      color: apptitleColor,
                                      fontSize: t4Size,

                                    ),maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ),
                              ],
                            ),
                          )
                  ],
                ),
              )
            ],
          ),
          Padding(
            padding: const EdgeInsets.only(top: 2.0),
            child: Text(
              "Welcome to Bellaz!",
              style: TextStyle(
                color: extraLightColor,
                fontSize: t5Size,
              ),
            ),
          )
        ],
      ),
    );
  }

enter image description here

Answer

Question answered by mik (source).

All you need to do is to set a MAX_LOCATION_TXT_LEN then display only the first chars if it passed it

static const MAX_LOCATION_TXT_LEN = 20;
String longTxt ="This text is too long";

String shortTxt = longTxt.length <= MAX_LOCATION_TXT_LEN ? longTxt : longTxt.substring(0, MAX_LOCATION_TXT_LEN) + "...";
FLUTTER FLUTTER-ANIMATION FLUTTER-LAYOUT
SHARE: