Home > Back-end >  Flutter - Ellipsize for Text Widget has issue with Space
Flutter - Ellipsize for Text Widget has issue with Space

Time:11-09

I am using below code to make my text content in single line and If exceeds limits displaying three dots as suffix of text:

Container(
         color: blackColorOP11,
         width: 250.w,
         child: Text(                                          
         "1234567890123kjhkjhgjsadadddah",
           style: TextStyle(
                           fontWeight: FontWeight.w600,
                           fontFamily: "Poppins",
                           fontSize: 24.sp,
                           color: Colors.white),
                           softWrap: true,
                           maxLines: 1,
                           overflow: TextOverflow.ellipsis,
                           ),
                         ),

So It displays output for text widget as "1234567890123kjhkj..." which is completely correct.

But The issue is If there is a space between this text content, for exampple like this: "1234 567890123kjhkjhgjsadadddah", It just display "1234..."

It should display "1234 56789123kjhk..."

What might be the issue? Or How can I achive output as above? : 1234 56789123kjhk...

CodePudding user response:

Resolved by some customisation:

"text content dummy".toString().length>18?
"text content dummy".toString().substring(0,18)   '...':
"text content dummy".toString(),

CodePudding user response:

use substring

 "1234567890123kjhkjhgjsadadddah".toString().substring(0,17)   '...'

Full code:

Container(
     color: Colors.green,
     width: 250,
     child: Text(                                          
     "1234567890123kjhkjhgjsadadddah".toString().substring(0,17)   '...',
       style: TextStyle(
                       fontWeight: FontWeight.w600,
                       fontFamily: "Poppins",
                       fontSize: 24,
                       color: Colors.red),
                       softWrap: true,
                       maxLines: 1,
                       overflow: TextOverflow.ellipsis,
                       ),
                     ), 
  • Related