在下划线上方显示带有填充的文本

Question

Is there a way to achieve the following results in Flutter where the underline below text will be nicely hidden by the padding around letters that overflow it, such as 'g', 'q', 'y', etc?

Emulator (current):

Design (desired):

Font: Spartan

Answer 1

The best way I found to achieve that was to use text stroke and Stack to create the underline effect. Here is the code:

Align(
  alignment: Alignment.centerLeft,
  child: Container(
    padding: EdgeInsets.symmetric(vertical: 6.0),
    child: Stack(
      children: [
        Positioned(
          bottom: 2,
          left: 0,
          right: 0,
          child: Container(height: 1.0, color: const Color(0xFF2F3543)),
        ),
        Text(
          "Forgot password?",
          style: TextStyle(
            fontWeight: FontWeight.w300,
            inherit: true,
            fontSize: 13.0,
            foreground: Paint()
              ..style = PaintingStyle.stroke
              ..strokeWidth = 2
              ..color = Colors.white,
          ),
        ),
        Text(
          "Forgot password?",
          style: TextStyle(
            color: const Color(0xFF2F3543),
            fontWeight: FontWeight.w300,
            inherit: true,
            fontSize: 13.0,
          ),
        )
      ],
    ),
  ),
)

And the screenshot of the results

Answer 2

EDIT

The first one looks working but not looks good and the second one working fine but p word not that good. When you dont want to add underline just write decoration:TextDecoration.none.

    Text.rich(
      TextSpan(
        text: 'For ',
        style: TextStyle(decoration: TextDecoration.underline, fontSize: 25),
        children: <TextSpan>[
          TextSpan(text: 'g',style:TextStyle(decoration: TextDecoration.none)),
          TextSpan( text: ' ',style:TextStyle(decoration: TextDecoration.underline, decorationThickness: 1)),
          TextSpan( text: ' p',style:TextStyle(decoration: TextDecoration.none,)),
          TextSpan( text: 'assword?',style:TextStyle(decoration: TextDecoration.underline)),
          //you can add more text span here
        ],
      ),
    ),
    Row(
      children: <Widget>[
        Text('For', style: TextStyle(decoration: TextDecoration.underline, fontSize: 25)),
        Text('g', style: TextStyle(decoration: TextDecoration.none, fontSize: 25)),
        Text('ot', style: TextStyle(decoration: TextDecoration.underline, fontSize: 25)),
        Text(' ', style: TextStyle(decoration: TextDecoration.underline, fontSize: 25)),
        Text('p', style: TextStyle(decoration: TextDecoration.none, fontSize: 25)),
        Text('assword', style: TextStyle(decoration: TextDecoration.underline, fontSize: 25)),
      ],
    )

Working example image