Flutter Question posted in
The official Flutter documentation can be found here.

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.

Tags:

2

Answers


  1. 0 
    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),
    ),
  ],
)
    Login or Signup to reply.
  2. 0 
    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,
    ),
  ],
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search