CODEWITHSUNDEEP
fluttertextrowexpandflexibility
subhangi pawar
subhangi pawar

Reputation: 461

How to display 2 text in row, text1 can be ellipsis but text2 should be display full length in flutter

Row[Image, Text1, Text2, Image]

Here Text1 is name, Text2 is ID and Image is fixed size25 and need to display at the end of the row.

Upvotes: 0

Views: 38

Answers (2)

Umair Ali
Umair Ali

Reputation: 836

const Row(
  children: [
     SizedBox(
       width: 100, // Fixed width for 'Name'
       child: Text(
              'Name', 
              overflow: TextOverflow.ellipsis, // Ellipsis when overflowing
              maxLines: 1, // Limit text to a single line
      ),
    ),
    Expanded(
      child: Text(
        'Id', 
        maxLines: 1, // Limit text to a single line
        overflow: TextOverflow.ellipsis, // Ellipsis when overflowing
      ),
     ),
    Image.asset( //image at the end with fixed size
      'assets/image.png', 
       width: 25, 
       height: 25,
    ),
  ],
);

Upvotes: 0

Riyal Gondaliya
Riyal Gondaliya

Reputation: 132

Like This :

Row(
  children: [
    // text1 will take available space and be truncated with ellipsis
    Expanded(
      child: Text(
        'This is a long text1 that will be truncated with ellipsis',
        overflow: TextOverflow.ellipsis, // Adds ellipsis if overflow occurs
        style: TextStyle(fontSize: 16),
      ),
    ),
    SizedBox(width: 10), // Add some spacing between the texts
    // text2 will take only the space it needs and display fully
    Text(
      'Full text2',
      style: TextStyle(fontSize: 16),
    ),
  ],
)

Upvotes: 0

Related Questions