Make text only slide if overflows

[angel-langdon]

How to make the text only slide if it overflows?

[MarcelGarus]

This seems like a commonly used feature, so I think it's a great fit for this package.

I'm currently quite busy with studying and work stuff, so it's probably gonna take some time before I find time to look at it though. If you have spare time and feel like it, don't hesitate to code something up and file a PR.

[hacker1024]

I've just tried implementing this myself, but it turns out it's more complicated to do than I thought.

I tried using _controller.position.maxScrollExtent to check if all the text fits on screen, but since a ListView.builderis being used, there's infinite scroll space.

There are three options that I can think of to implement this:

1. Use the widget's width and manually calculating the width of the text (taking into account the font family, scale factor, font size, text style, font weight, etc.) and use those two properties to evaluate the need to scroll
2. Reimplement the build method entirely in a way that would fix the maxScrollExtent property
3. Make a dud ScrollView with a height of zero in a column above the real one, and use that with just a text widget in size and check that ScrollView's maxScrollExtent.

The third way is probably a bit wasteful, but also the easiest way of doing this.

[hacker1024]

Oh, I see there's already a method to calculate the text width. All that's needed is a way to get the width of a widget - which I'm not quite sure how to do.

[MarcelGarus]

Maybe we could use a LayoutBuilder to get the total width?

[Fethi-Hamdani]

any update about this

[MarcelGarus]

To be honest, since this package has a pretty low priority to me right now, so it's gonna be some time until I have a look at it. If anyone codes up a PR, I'll be happy to review that, of course.

[pratamatama]

I was looking for the same idea for a while, but then I found a workaround. Not sure if this suits all you guy's needs but it works for me.

// Obx is a getx widget, you can use something like LayoutBuilder for vanilla flutter
Obx(() {
  if (controller.title.length > 8)
    return Container(
      height: Get.textTheme.headline6.fontSize, // headline6 is taken from ListTile's default title size (see them on devtools)
      child: Marquee(
        text: controller.title,
        velocity: 20,
        showFadingOnlyWhenScrolling: true,
        fadingEdgeStartFraction: 0.1,
        fadingEdgeEndFraction: 0.1,
        blankSpace: 8,
      ),
    );
  return Text(controller.title);
}),

[nt4f04uNd]

i'm surprised nobody actually found a solution which is pretty easy to build with auto_size_text

https://github.com/nt4f04uNd/nt4f04unds_widgets/blob/f14e448d23d347f17c05549972e638d61cf300b4/lib/src/widgets/marquee.dart

@marcelgarus maybe looking at the auto_size_text code can help you to implement this

[alexmercerind]

@nt4f04uNd ! 🙏🙏🙏🙏

[rtybanana]

I had this same issue so I wrote a little wrapper here for the current version of marquee which utilises a LayoutBuilder to assess available space and render a marquee if the text overflows, otherwise it renders standard text which doesn't scroll. This will only work for horizontally scrolling marquees.

Hope this helps someone.

[isyshuai]

@nt4f04uNd OMG!  🤭👍