Display text above underline with padding

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