How to have several Texts with overflow and maximize the size used?

Question

I would like to have 2 texts on the same row, one aligned left, the other aligned right.

Both texts are inside a Flexible widget and have overflow option in case the user resizes the screen (it is a flutter web project).

This is my code so far:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Flexible(
                  child: Text(
                    'First text looong looooooooooooooooooong looooooooooooooooooooooooooooong',
                    overflow: TextOverflow.fade,
                  ),
                ),
                Flexible(
                  child: Text(
                    'Second text',
                    overflow: TextOverflow.fade,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

The issue is that using flexibles, the texts are only taking 50% of the screen maximum even if the other text is pretty small and there is actually enough space for the first one:

What I would like is to allow the texts to grow as much as they want as long as there is some space between them. But if the texts are too long to fit on the same line, both of them should be 50% of the width:

------------------------------------------------------
|Short first text                   Short second text|
------------------------------------------------------

------------------------------------------------------
|Looooooooooooooooong first text    Short second text|  // <- First text is more than 50% of the width
------------------------------------------------------

------------------------------------------------------
|Very looooooooooooooooong first... Short second text|  // <- First text is more than 50% of the width and overflows
------------------------------------------------------

------------------------------------------------------
|Short first text   Loooooooooooooooooong second text|  // <- Second text is more than 50% of the width
------------------------------------------------------

------------------------------------------------------
|Short first text Very looooooooooooooooong second...|  // <- Second text is more than 50% of the width and overflows
------------------------------------------------------

------------------------------------------------------
|Looooooooooooong first... Looooooooooooong second...|  // <- First and Second texts are 50% of the width
------------------------------------------------------

How can I achieve this?

Answer 1

I hope this will help you to solve the issue;

1. Try mainaxisalignment with spacearound, this will evenly distribute the space for all widgets in a row according to the screen width.

2. If this not what your are looking for, then wrap the widgets with text direction like explained in this example (https://www.logiak.com/blog/directionality-in-flutter)

3. or else try the textalign widget like in the flutter documentation(https://api.flutter.dev/flutter/dart-ui/TextAlign-class.html)

Reply back, how did you solved the issue.