Line spacing

[robbi...@gmail.com]

Is there a way to control line spacing on text wrap?

(also, as an aside, exactly when text will wrap and when it won't has been confusing to me)

[Adam Barth]

On Fri, Apr 22, 2016 at 7:28 AM <robbi...@gmail.com> wrote:

Is there a way to control line spacing on text wrap?

Does http://docs.flutter.io/flutter/painting/TextStyle/height.html do what you'd like?

(also, as an aside, exactly when text will wrap and when it won't has been confusing to me)

Is there a specific case that confuses you?  I might be able to help explain why it's doing what it's doing in a specific case.

Adam

 

[robbi...@gmail.com]

I will try 'height' later and let you know,  I had assumed that was overall height for the Text widget.  Maybe rename it 'lineHeight' if that's what it truly is?

Re; the wrapping, it's usually because I put Text in nested Rows and expected it to wrap.  I guess it can't if it doesn't know the width.  So then I have to try putting it in things like a constrained Container or SizedBox just to make it wrap.  There was a lot of trial and error involved. The solution many times actually wound up being making sure Text was a first generation child of the flexible component.  It seems to behave more as I expected when the component tree is less complicated.

It'd be nice if the logic were a little more forgiving and assumed you don't want a Row going off screen unless you tell it so and thus default Rows would always know their max width.. 

[Ian Hickson]

Re text height: "height" does two things depending on where you put it, which is why we haven't called it "lineHeight". If you put it on the style at the root of your TextSpan widget (or in a DefaultTextStyle or whatever), then it sets the line height. If you set it on a TextSpan nested inside another, it sets the height of that textspan, which influences the line height but doesn't directly set it (the line height will be the total extent from the highest inner text span to the lowest inner text span).

I've filed https://github.com/flutter/flutter/issues/3495 to track fixing the docs on this.

Re the wrapping issue, I agree that this is a tricky part of our current design. Would you mind filing a bug showing an example of what you had built that you found unintuitive and describing what you think it should have done?

https://github.com/flutter/flutter/issues/new

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To post to this group, send email to flutt...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/4513e35d-4c7a-4235-b596-4af820730bc0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[robbi...@gmail.com]

I'll create issues when I run into it in the future.

Is there guidance on when to use TextSpan versus Text widgets?  I've been using Text, but the conversation went immediately to TextSpan, making me think that's the preferred widget for normal use..

Does Text behave exactly the same as TextSpan if the TextSpan has no children?

[Adam Barth]

On Fri, Apr 22, 2016 at 10:36 AM <robbi...@gmail.com> wrote:

I'll create issues when I run into it in the future.

Is there guidance on when to use TextSpan versus Text widgets?  I've been using Text, but the conversation went immediately to TextSpan, making me think that's the preferred widget for normal use..

TextSpan isn't a widget.  It's something that explains to the Text (or RichText) widget what sort of text you want to display, similar to how a BoxDecoration explains what sort of decoration you want your box to display:

http://docs.flutter.io/flutter/widgets/Text-class.html

http://docs.flutter.io/flutter/painting/TextSpan-class.html

Generally, if you have a single string of text that you want to all have the same style, you should use the Text widget.  If you want different parts of your text to have different styles, you should use the RichText widget.  The Text widget is implemented by creating a RichText widget with a single TextSpan that combines the string and style you provided.

Does Text behave exactly the same as TextSpan if the TextSpan has no children?

Here's the build function for Text:

https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/basic.dart#L1798

It just creates a RichText widget with a single TextSpan that combines the string and style you gave to the Text widget.  If you don't provide a style, it will use the DefaultTextStyle from its BuildContext.

Adam

To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/0b08efe7-5e34-4ae6-a885-4d0e33b7a964%40googlegroups.com.

[robbi...@gmail.com]

Thank you for the explanation.  I like that TextSpan takes a GestureRecognizer too.

[robbi...@gmail.com]

I was able to achieve the effect I wanted using 'height'.  Thanks!

On Friday, April 22, 2016 at 11:07:23 AM UTC-4, Adam Barth wrote:

[robbi...@gmail.com]

OK, here's an example of Text wrapping (or rather text not wrapping) driving me nuts.

I'm trying to do something seemingly straightforward:  center an icon/text couplet where the text may be more than one line and may be any size.

I try a bunch of combos (Row, Flexible, Center, etc) and nothing works.  Either I get the red overflow boxes of misery or I get the Text expanding and kicking the icon out away from it.  Or sometimes I get an exception when flex encounters an unbounded width.

There's got to be an easy way to do this that I'm just overlooking.  

I'm going to try putting them both in a Stack next and see if I can center that while getting the wrapping to work.  But that seems like a hack... Please help!

[Adam Barth]

On Fri, Apr 29, 2016 at 8:43 AM <robbi...@gmail.com> wrote:

OK, here's an example of Text wrapping (or rather text not wrapping) driving me nuts.

I'm trying to do something seemingly straightforward:  center an icon/text couplet where the text may be more than one line and may be any size.

My first guess would be something like:

    new Column(

      crossAxisAlignment: CrossAxisAlignment.center,

      children: <Widget>[

        new Icon(icon: Icons.hotel),

        new Text('my text goes here', style: new TextStyle(textAlign: TextAlign.center))

      ]

    )

If you want it to shrinkwrap vertically, you can add a mainAxisAlignment of MaxAxisAlignment.collapse.

Adam

I try a bunch of combos (Row, Flexible, Center, etc) and nothing works.  Either I get the red overflow boxes of misery or I get the Text expanding and kicking the icon out away from it.  Or sometimes I get an exception when flex encounters an unbounded width.

There's got to be an easy way to do this that I'm just overlooking.  

I'm going to try putting them both in a Stack next and see if I can center that while getting the wrapping to work.  But that seems like a hack... Please help!

   

On Friday, April 22, 2016 at 10:28:52 AM UTC-4, robbi...@gmail.com wrote:

Is there a way to control line spacing on text wrap?

(also, as an aside, exactly when text will wrap and when it won't has been confusing to me)

--

You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To post to this group, send email to flutt...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/ba125b3f-7668-4c05-ad82-d30c3475ac54%40googlegroups.com.