Base align text and dashed line in Flutter

Question

I'm trying to create something like this for my Flutter app:

Right now I've successfully got a row with text, a dashed line and larger text for the money. My last problem I can't seem to solve is getting rid of the variable size gap in different sized text.

[EDIT] I specifically mean having everything aligned on the same red line:

Looking at this answer I figured that I could do the same thing and place all the text in positioned stacks. That however breaks my layout giving me this error:

I/flutter (26439): The following assertion was thrown during performLayout():
I/flutter (26439): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter (26439): When a column is in a parent that does not provide a finite height constraint, for example if it is
I/flutter (26439): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
I/flutter (26439): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
I/flutter (26439): space in the vertical direction.
I/flutter (26439): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
I/flutter (26439): cannot simultaneously expand to fit its parent.
I/flutter (26439): Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible
I/flutter (26439): children (using Flexible rather than Expanded). This will allow the flexible children to size
I/flutter (26439): themselves to less than the infinite remaining space they would otherwise be forced to take, and
I/flutter (26439): then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum
I/flutter (26439): constraints provided by the parent.
I/flutter (26439): The affected RenderFlex is:
I/flutter (26439):   RenderFlex#c7fb1 relayoutBoundary=up8 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (26439): The creator information is set to:
I/flutter (26439):   Column ← Expanded ← Row ← Column ← Padding ← RepaintBoundary-[<0>] ← IndexedSemantics ←
I/flutter (26439):   NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← SliverList ←
I/flutter (26439):   MediaQuery ← ⋯
I/flutter (26439): See also: https://flutter.dev/layout/

Here is my relevant code:

Row(
  crossAxisAlignment: CrossAxisAlignment.end,
  children: <Widget>[
    Text('Salary Cap'),
    // Stack( // Will cause error
    //   fit: StackFit.expand,
    //   children: <Widget>[
    //     Positioned(
    //       top: 0,
    //       left: 0,
    //       width: 200,
    //       child: Text('Salary Cap'),
    //     ),
    //   ],
    // ),
    Expanded(
      child: Container(
        width: double.infinity,
        child: CustomPaint(painter: LineDashedPainter()),
      ),
    ),
    RichText(
      text: TextSpan(
        children: <TextSpan>[
          TextSpan(text: '\$'),
          TextSpan(
            text:
                '${oCcy.format(salaryLimit)}',
            style: Theme.of(context).textTheme.display1,
          ),
        ],
      ),
    ),
  ],
),

Any advice?

Answer 1

You can your these 2 lines

crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.ideographic,