even on word ,it still marquee

[hu70258tao]

I am chinses,english is very weak。when screen can show all str,it is still marquee,i think should not。if string.length is small and font is big，few word also should marquee,so can not charge by string.length,should by yesORno over screen. my English is weak,hope you can understand.

[hu70258tao]

if widget can show all words,it should not marquee,else should marquee。 组件若能显示所有文字，则不该滚动

[MarcelGarus]

Oh, I see. So, if all the text fits, the widget should just show the text? If it does not, it should display the marquee?

That's a good question, I'm not entirely sure how to handle that, although that seems to me like a common use case. I'll think about it some more, then come back to you.

[hu70258tao]

thanks your response，I can not express more by English。大声喊出我爱你，双手赞你666

[Drabuna]

@hu70258tao before it gets implemented properly, just use this:

typedef MarqueeBuilder = Marquee Function(
    BuildContext context, String text, TextStyle textStyle);
typedef TextBuilder = Text Function(
    BuildContext context, String text, TextStyle textStyle);

class MarqueeOnDemand extends StatelessWidget {
  final MarqueeBuilder marqueeBuilder;
  final TextBuilder textBuilder;
  final String text;
  final TextStyle textStyle;
  final double switchWidth;

  const MarqueeOnDemand(
      {Key key,
      @required this.marqueeBuilder,
      @required this.textBuilder,
      @required this.text,
      @required this.textStyle,
      @required this.switchWidth})
      : super(key: key);

  Size _textSize(String text, TextStyle style) {
    final TextPainter textPainter = TextPainter(
        text: TextSpan(text: text, style: style),
        maxLines: 1,
        textDirection: TextDirection.ltr)
      ..layout(minWidth: 0, maxWidth: double.infinity);
    return textPainter.size;
  }

  @override
  Widget build(BuildContext context) {
    final textWidth = this._textSize(this.text, this.textStyle).width;
    return textWidth < this.switchWidth
        ? this.textBuilder(context, text, textStyle)
        : this.marqueeBuilder(context, text, textStyle);
  }
}

And then use it in your code:

MarqueeOnDemand(
    switchWidth: 278, 
    text: "My short or long text ",
    textStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.w600),
    marqueeBuilder: (context, text, textStyle) => Marquee(
        text: text,
        style: textStyle,
        scrollAxis: Axis.horizontal,
        blankSpace: 20.0,
        velocity: 10.0,
    ),
    textBuilder: (context, text, textStyle) => Text(
        text,
        style: textStyle,
    ),
)

switchWidth - is a width of text, when you want to use Marquee instead of normal text.

Not the most elegant solution, but works for me :)

[MarcelGarus]

I'll try to support this functionality natively in the next major version of this package.

[hu70258tao]

@danieldai oh,i test just now,but it does not work,still roll event one word.

[shabake]

Oh, I see. So, if all the text fits, the widget should just show the text? If it does not, it should display the marquee?

That's a good question, I'm not entirely sure how to handle that, although that seems to me like a common use case. I'll think about it some more, then come back to you.

Hi I also encountered this problem, it doesn't seem to be solved, it also scrolls when the length is short

[lohhans]

@hu70258tao before it gets implemented properly, just use this:

typedef MarqueeBuilder = Marquee Function(
    BuildContext context, String text, TextStyle textStyle);
typedef TextBuilder = Text Function(
    BuildContext context, String text, TextStyle textStyle);

class MarqueeOnDemand extends StatelessWidget {
  final MarqueeBuilder marqueeBuilder;
  final TextBuilder textBuilder;
  final String text;
  final TextStyle textStyle;
  final double switchWidth;

  const MarqueeOnDemand(
      {Key key,
      @required this.marqueeBuilder,
      @required this.textBuilder,
      @required this.text,
      @required this.textStyle,
      @required this.switchWidth})
      : super(key: key);

  Size _textSize(String text, TextStyle style) {
    final TextPainter textPainter = TextPainter(
        text: TextSpan(text: text, style: style),
        maxLines: 1,
        textDirection: TextDirection.ltr)
      ..layout(minWidth: 0, maxWidth: double.infinity);
    return textPainter.size;
  }

  @override
  Widget build(BuildContext context) {
    final textWidth = this._textSize(this.text, this.textStyle).width;
    return textWidth < this.switchWidth
        ? this.textBuilder(context, text, textStyle)
        : this.marqueeBuilder(context, text, textStyle);
  }
}

And then use it in your code:

MarqueeOnDemand(
    switchWidth: 278, 
    text: "My short or long text ",
    textStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.w600),
    marqueeBuilder: (context, text, textStyle) => Marquee(
        text: text,
        style: textStyle,
        scrollAxis: Axis.horizontal,
        blankSpace: 20.0,
        velocity: 10.0,
    ),
    textBuilder: (context, text, textStyle) => Text(
        text,
        style: textStyle,
    ),
)

switchWidth - is a width of text, when you want to use Marquee instead of normal text.

Not the most elegant solution, but works for me :)

Thanks for this!! Worked perfectly! The devs must implement this funcionality... :smile:

[MarcelGarus]

Okay, I'll try to look into it in the next days, shouldn't be much work 👍🏻

[hu70258tao]

@lohhans 这是一个好主意,不过我认为switchWidth并不方便获取来使用,我做了一些修改,经过测试能够正常地运作. 很尴尬的是,因为我在中国的缘故,github上的图片总是不能显示,包括你们和我的头像.

[josh2112]

@hu70258tao has a great solution -- instead of comparing the measured text size against a hardcoded width, use LayoutBuilder which gives you the available width in the constraint parameter of the builder function.

[SidneyMachara]

@marcelgarus if the text fits, can we also consider a way to set the mainAxisAlignment. i will open this as an independent issue, just mentioning it here cause i feel they fo together