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
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)),
],
)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.