Flutter – Row text overflow issue

February 15, 2023

using this code i am getting text overflow error.
How to resolve this?

Scaffold(
      backgroundColor: MyColor.bgLightColor,
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(20.0),
            child:Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Expanded(
                child: Row(
                  children: [
                    Container(
                      height: 20,
                      width: 24,
                      decoration: const BoxDecoration(
                          image: DecorationImage(
                        image: AssetImage('assets/current_outlet_icon.png'),
                        fit: BoxFit.fill,
                      )),
                    ),
                    Text(
                      "Current Outlet",
                      style: textStyleWith12500(MyColor.darkGreyColor),
                    )
                  ],
                ),
              ),
              Expanded(
                child: Row(  
                  children: [
                    Image.asset(
                      "assets/location_pin.png",
                      height: 18,
                      width: 18,
                      color: MyColor.primaryRedColor,
                    ),
                    Text(
                      "WTC Tower, Los Angeless sbdjkds jsbksdb kcbk",  // here
                      style: textStyleWith12600(MyColor.blackColor),
                    ),
                  ],
                ),
              )
            ],
          )
        ],
      )),
    )

this is my text style and others textstyle is like this

TextStyle textStyleWith12500(Color color) {
  return TextStyle(
      fontWeight: FontWeight.w500,
      fontSize: MyFontSizes.t12Size,
      fontStyle: FontStyle.normal,
      color: color);

>Solution :

This can be solve in two ways. One is using overflow attribute and another is wrapping with widget.
Overflow attribute with ellipse type will solve it with dots are end which means there are more text.

Wrapping with Flexible :

                Flexible(
                  child: Text(
                      'WTC Tower, Los Angeless sbdjkds jsbksdb kcbk',
                  style: textStyleWith12600(MyColor.blackColor)
                    ),
                )

This will send long text to next line and will not get overflow issue. Hope it helps.