How to place Row elements' centers evenly (not using Expanded-s) - flutter

Question

I tried my best to summarize what I want in the title, but here is a more detailed explanation:
Widgets' centers should be placed evenly throughout the row.
A larger widget should be able to extend into the "personal space" of a smaller one.
When it would overflow, overflow should start on the bigger items, cutting into the smaller ones later.
Here's an illustration:
Behavior with Expandeds:
Everything fits
Longest item is overflowing - The problem with this is that the longest text would easily fit if it could extend into the boundary of the shorter texts next to it.
How it should work:
Please notice: The boxes are not Expanded, but the centers of them are evenly placed (not by themselves, but as if they were the centers of Expandeds). As opposed to just laying them out with usual MainAxisAlignment options; neither of those ensures that the centers are evenly placed, a longer text can push the shorter ones to one side. (Illustraion of what I don't want)
Everything fits
Longest text extends into the area of the shorter ones
When two boxes would touch, overflow the longer one
Extreme case - default to even sizes
This may be asking a lot, but I think there should be a way of achieving these, what's more, I think this should be the default way rows with texts work.
Any help on any sub-request is much appreciated.
Edit: I understand that everything I described is pretty complicated when put together. I would be happy to know a way to just simply place center lines evenly, with different width boxes (and no, spaceEvenly doesn't do this). Overflowing behavior can be a different question.

Answer 1

Have you tried mainAxisAlignment: MainAxisAlignment.spaceEvenly? Then you can play with the padding. It seems that you would also like to make your UI responsive, try the LayoutBuilder class. The documentation can be found here https://flutter.dev/docs/development/ui/layout/responsive .

Answer 2

First of all use 3 Expanded() for taking spaces for 3 Text() Widgets after that you can align your text at center using a container. Hope this solution will meet your requirement.
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Container(
alignment: Alignment.center,
child: Text('Lorem', style: TextStyle(fontSize: 24),),
),
),
Expanded(
child: Container(
alignment: Alignment.center,
child: Text('Lorem ispum', style: TextStyle(fontSize: 24),),
),
),
Expanded(
child: Container(
alignment: Alignment.center,
child: Text('Lorem', style: TextStyle(fontSize: 24),),
),
),
]
);
}
}