Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

text justify is not working correctly with RichText

I am using RichText and in this text justify is not working correctly with RichText when using any of text span with style decoration: TextDecoration.underline

RichText(
          softWrap: true,
          textAlign: TextAlign.justify,
          text: TextSpan(
            style: TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.w500,
              fontSize: 16.0,
            ),
            children: getSpan(),
          ),
        )
List<TextSpan> getSpan() {
    List<TextSpan> spans = List<TextSpan>();
    spans.add(TextSpan(
      text:
      "And thus We made them rise ",
    ));
    spans.add(
      TextSpan(
          text: " they ",
          style: TextStyle(
             decoration: TextDecoration.underline,
          ),
          recognizer: TapGestureRecognizer()
            ..onTap = () {
              print("click on me");
            }),
    );
    spans.add(TextSpan(
      text:
      " And thus We made them rise ",
    ));
    return spans;
  }

See the restul

like image 908
Deepak Gehlot Avatar asked Mar 05 '19 13:03

Deepak Gehlot


People also ask

Can you justify text in CSS?

The text-justify property in CSS is a companion to the text-align property that is used to set the justification method of text when text-align is set to the justify value.

Should I use text-align justify?

text-align: justify shouldn't be used in browsers at the moment. They aren't good at handling the minute details within and the output ends up containing lots of rivers and there's no support for hyphenation (other than soft hyphens).

How do you align text in flutter?

Flutter – Center Align Text in Text Widget To center align the text in a Text widget, provide textAlign property with value TextAlign. center .

How to justify right space in RichTextBox?

1) Find the length of your richtextbox (rtb_Length) and lengh of text (text_Length). 2) IF text_Length > rtb_Length, Subtract the diff = rtb_Length - text_Length. [This will give you how many space is blank]. 3) If you want to Justify RIGHT, then add spaces of diff value in the begining of text, else to the end of text.

How to justify text length with Diff?

2) IF text_Length > rtb_Length, Subtract the diff = rtb_Length - text_Length. [This will give you how many space is blank]. 3) If you want to Justify RIGHT, then add spaces of diff value in the begining of text, else to the end of text. So if rtb_Length = 20, text_Length = 13, then diff = 7.

Is it possible to align text to the right by default?

You can align to the right with the text editor properties but not to set it to be like that by default and It is Important to the Users. I have noticed that when pressing the Enter key to create a new line the space between the lines is very large.


1 Answers

It looks like a nasty effect of textAlign property when set to TextAlign.justify.

RichText(
          softWrap: true,
          //textAlign: TextAlign.justify,
          text: TextSpan(
            style: TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.w500,
              fontSize: 16.0,
            ),
            children: getSpan(),
          ),
        )

Updated to 21/03/19

The bug it is now fixed and at the moment (21/03/19) it is available in the master flutter channel:

flutter channel master
like image 99
attdona Avatar answered Oct 24 '22 19:10

attdona