简体   繁体   中英

wrap text in flutter

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,
              ),
            ),
          )
        ],
      ),
    );
  }

在此处输入图片说明

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) + "...";

尝试使用“灵活”或“扩展”小部件来包装文本。

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM