Is it possible to underline text with some height between text and underline line?

Question

today I am trying to make sticker.ly app UI in a flutter. But I stuck in adding space between underline and text. here is my code

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.all(13),
            margin: MediaQuery.of(context).padding,
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Text('For You', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, decoration: TextDecoration.underline,),),
                    SizedBox(width:8),
                    Text('Sticker', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
                    SizedBox(width:8),
                    Text('Status', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

and here I want to add space between underline and Text('For You') . is there any way to do this in a much better way?

Avocet

Answer 1

Here's a simple hacky way to do it:

Text(
            "Forgot Password?",
            style: TextStyle(
              shadows: [
                Shadow(
                    color: Colors.red,
                    offset: Offset(0, -5))
              ],
              color: Colors.transparent,
              decoration:
              TextDecoration.underline,
              decorationColor: Colors.blue,
              decorationThickness: 4,
              decorationStyle:
              TextDecorationStyle.dashed,
            ),
          )

I wrote an article about text underlining with a few other solutions but this is my favorite.

Tithonus

Nice solution! I have wrapped the code into an extension that avoids cluttering the widget's code, see this answer: https://mcmap.net/q/99398/-how-to-underline-text-in-flutter – Reg

That seems tricky to me – Hansel

Remember to wrap your Text widget with Transform.translate with opposite Offset (Offset(0,5) for this example) otherwise Text would be rendered in different position than it was before – Rrhagia

Not working for multine. – Fanlight

Answer 2

You can try something like this:

Container(
padding: EdgeInsets.only(
  bottom: 3, // This can be the space you need between text and underline
),
decoration: BoxDecoration(
  border: Border(bottom: BorderSide(
    color: Colors.black,
    width: 1.0, // This would be the width of the underline
  ))
),
child: Text(
  "For You",style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, decoration: TextDecoration.underline,)
  ,),)

Sheenasheeny

why you copied your answer from StackOverflow?... I tried this doesn't work for me – Avocet

provide your unique answer to grow flutter community, not a copied answer – Avocet

I tried it personally and it worked, I am sorry if it didn't work for you. – Sheenasheeny

this is perfect! because the first answer actually creates the underline, but no control over the spacing and almost always they are too close together. – Heredia

I think this should be the accepted answer – Argeliaargent

Answer 3

Little improved version of https://mcmap.net/q/399675/-is-it-possible-to-underline-text-with-some-height-between-text-and-underline-line

Text(
                                    cohort.name,
                                    maxLines: 2,
                                    overflow: TextOverflow.ellipsis,
                                    textAlign: TextAlign.center,
                                    style: TextStyle((
                                      height: 1.5,
                                      shadows: [
                                        Shadow(
                                            color: Colors.black,
                                            offset: Offset(0, -5))
                                      ],
                                      color: Colors.transparent,
                                      decoration: TextDecoration.underline,
                                      decorationColor: Colors.black,
                                    ),

Westing

cool this is the easiest method thanks! – Cyclostyle

Answer 4

after a lot of tries I am able to resolve by issue. Here is my code

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.all(13),
            margin: MediaQuery.of(context).padding,
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Text('For You', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16,),),
                    SizedBox(width:8),
                    Text('Sticker', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
                    SizedBox(width:8),
                    Text('Status', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
                  ],
                ),
                Row(children: <Widget>[
                  Padding(padding: EdgeInsets.symmetric(horizontal: 1, vertical: 5),
                  child: Container(
                    height: 3,
                    width: 52,
                    color: Colors.black,
                  ),
                  ),
                ],),
              ],
            ),  
          ),
          //search bar layout
          Container(
            child: Column(children: <Widget>[

            ],),
          ),
        ],
      ),
    );
  }
}

Avocet

Answer 5

Here's my non-hacky way to do it (hack wasn't working for me):

IntrinsicWidth(
  child: Column(
  children: [
    Text(dateRange, style: _jobTitleStyle(context)),
    Container(height: 1, color: Colors.white),
  ],
 ),
),

Draw a line with a Container like so. Then shrink it to match the size of Text by using IntrinsicWidth (note, this may have performance impact if overused).

Rolfe

Answer 6

 Container(
    decoration:  BoxDecoration(
                    border: Border(
                    bottom: BorderSide(color: Colors.black))
                 ),
     child: const Text("Forgot password ?"),
 )

Retroflex

Answer 7

Posting what's worked for me here. Tried all the above answers but they didn't help me

IntrinsicWidth(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: const [
                Text(
                  "Show more product and categories",
                ),
                Divider(
                  thickness: 0.3,
                ),
              ],
            ),
          )

Here is how it looks like

IntrinsicWidth() is used to limit the Divider() width with Text() widget

Stockbreeder

Answer 8

This underlining way, has a bigger padding between text and the underline:

Container(
  child: Text.rich(
    TextSpan(
      style: TextStyle(
        ...,
        decoration: TextDecoration.underline,
      ),
      children: [...],
    ),
  ),
),

Woe