How to align two Text widgets in Flutter-CodePudding

I have two Text widgets in a Row widget. One contains a label which can differ in length depending on user's language. Second one is a countdown timer that does not differ much in length (3 to 5 characters). E.g. ":05" or "12:34".

I want the timer to be displayed in full and the label to take the remaining space and be truncated if it cannot fit.

I tried something like this (in reality I am using more widgets for localization, semantics and managing font size based on screen dp, but I guess this is the gist of it...)

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
          Text('Potentially long text here want to truncate it if there is not enough room',
                  overflow: TextOverflow.ellipses,
              ), 
          Text('12:34'),
      ],
)

This does not work and the first widget is displayed in full (in my case it actually fits), and the clock is pushed out of the screen causing a UI overflow.

What I want is something like this:

Potentially long text... 12:34

How can this be done?

CodePudding user response：

Did you try wrapping in an Expanded Widget? another thing is that set maxLine field to 1 (in Text Widget).

Expanded(
                child: Text(
                  'Loooooooooooooooooooooong teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext',
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
              )

CodePudding user response：

Try this:

Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                        children: [
                                          Text('Potentially long text here want to truncate it if there is not enough room',
                                            overflow: TextOverflow.ellipses,
                                          ),
                                          Flexible(
                                              fit: FlexFit.tight,
                                              child: Text('12:34')),
                                        ],
                                      )

CodePudding user response：

Try Below code: wrap your Text inside Expanded or Flexible widget

   Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: const [
              Expanded(
                child: Text(
                  'Potentially long text here want to truncate it if there is not enough room',
                  overflow: TextOverflow.ellipsis,
                  maxLines: 1,
                ),
              ),
              Spacer(),
              Text('12:34'),
            ],
          ),

CodePudding user response：

Try this one

      Row(
           
            children: const [
              Expanded(
                child: Text(
                  'Potentially long text here want to truncate it if there is not enough room',
                  overflow: TextOverflow.ellipsis,
                  maxLines: 1,
                ),
              ),
              
              Text('12:34'),
            ],
          ),

CodePudding user response：

Just wrap your Text widget with Expanded.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Expanded(
      child: Text('Potentiall long text here want to truncate it if there is not enough room',
        overflow: TextOverflow.ellipsis,
      ),
    ),
    Text('12:34'),
  ],
),