marcelgarus / marquee

A Flutter widget that scrolls text infinitely. Provides many customizations including custom scroll directions and velocities, pausing after every round and specifying custom durations and curves for accelerating and decelerating.

⏩ A Flutter widget that scrolls text infinitely. Provides many customizations including custom scroll directions, durations, curves as well as pauses after every round.

Appreciate the widget? Show some ❤️ and star the repo to support the project.

Usage

This is a minimalistic example:

Marquee(
  text: 'There once was a boy who told this story about a boy: "',
)

And here's a piece of code that makes full use of the marquee's customizability:

Marquee(
  text: 'Some sample text that takes some space.',
  style: TextStyle(fontWeight: FontWeight.bold),
  scrollAxis: Axis.horizontal,
  crossAxisAlignment: CrossAxisAlignment.start,
  blankSpace: 20.0,
  velocity: 100.0,
  pauseAfterRound: Duration(seconds: 1),
  startPadding: 10.0,
  accelerationDuration: Duration(seconds: 1),
  accelerationCurve: Curves.linear,
  decelerationDuration: Duration(milliseconds: 500),
  decelerationCurve: Curves.easeOut,
)

For more information about the properties, have a look at the API reference.

marquee's Issues

remove == operator override

https://github.com/marcelgarus/marquee/blob/df656fb04b05b269409b1c755de23906642dd430/lib/marquee.dart#L517-L532

these lines are pointless. first of all, what is the use case for such override?
secondly this won't work properly until you override hashCode as well

Scroll Speed seems to lag behind changes to it

I am using a slider to adjust the velocity. But even though I am calling a setState, it takes 1-60+ seconds before I see the change in the velocity of the Marquee. Is there any way to make this more interactive?

text 不能传递list吗？

如题，

option to set mainAxisAlignment

it would be nice to be able to set the mainAxisAlignment, especially for text that fits with no need to scroll.

Allow counter to stop the scroll

Let's say i want the marquee to scroll 3 times then just stop scrolling.
It would be nice to have :

Marquee(
  text: 'Some sample text that takes some space.',
  style: TextStyle(fontWeight: FontWeight.bold),
  **repetitionCounter: 3,**
  scrollAxis: Axis.horizontal,
  crossAxisAlignment: CrossAxisAlignment.start,
  blankSpace: 20.0,
  velocity: 100.0,
  pauseAfterRound: Duration(seconds: 1),
  startPadding: 10.0,
  accelerationDuration: Duration(seconds: 1),
  accelerationCurve: Curves.linear,
  decelerationDuration: Duration(milliseconds: 500),
  decelerationCurve: Curves.easeOut,
)

NoSuchMethodError: The method 'toDouble' was called on null.

Error Log:

05-16 14:54:38.913 11877-12010/com.lunata.dating E/flutter: [ERROR:flutter/lib/ui/ui_dart_state.cc(148)] Unhandled Exception: NoSuchMethodError: The method 'toDouble' was called on null.
    Receiver: null
    Tried calling: toDouble()
    #0      Object.noSuchMethod (dart:core-patch/object_patch.dart:50:5)
    #1      double.> (dart:core-patch/double.dart:87:31)
    #2      ScrollPosition._updateSemanticActions (package:flutter/src/widgets/scroll_position.dart:436:16)
    #3      ScrollPosition.notifyListeners (package:flutter/src/widgets/scroll_position.dart:695:5)
    #4      ScrollPosition.forcePixels (package:flutter/src/widgets/scroll_position.dart:318:5)
    #5      ScrollPositionWithSingleContext.jumpTo (package:flutter/src/widgets/scroll_position_with_single_context.dart:201:7)
    #6      ScrollController.jumpTo (package:flutter/src/widgets/scroll_controller.dart:172:16)
    #7      _MarqueeState._makeRoundTrip (package:marquee/marquee.dart:512:17)
    <asynchronous suspension>
    #8      _MarqueeState._scroll (package:marquee/marquee.dart:446:11)
    <asynchronous suspension>
    #9      Future.doWhile.<anonymous closure> (dart:async/future.dart:534:26)
    #10     _rootRunUnary (dart:async/zone.dart:1132:38)
    #11     _CustomZone.runUnary (dart:async/zone.dart:1029:19)
    #12     _CustomZone.runUnaryGuarded (dart:async/zone.dart:931:7)
    #13     _CustomZone.bindUnaryCallbackGuarded.<anonymous closure> (dart:async/zone.dart:968:26)
    #14     Future.doWhile (dart:async/future.dart:549:18)
    #15     _MarqueeState.initState.<anonymous closure> (package:marquee/marquee.dart:441:14)
    #16     new Future.delayed.<anonymous closure> (dart:async/future.dart:316:39)
    #17     _rootRun (dart:async/zone.dart:1120:38)
    #18     _CustomZone.run (dart:async/zone.dart:1021:19)
    #19     _CustomZone.runGuarded (dart:async/zone.dart:923:7)
    #20     _CustomZone.bindCallbackGuarded.<anonymous closure> (dart:async/zone.dart:963:23)
    #21     _rootRun (dart:async/zone.dart:1124:13)
    #22     _CustomZone.run (dart:async/zone.dart:1021:19)
    #23     _CustomZone.bindCallback.<anonymous closure> (dart:async/zone.dart:947:23)
    #24     Timer._createTimer.<anonymous closure> (dart:async-patch/timer_patch.dart:21:15)
    #25     _Timer._runTimers (dart:isolate-patch/timer_impl.dart:382:19)
    #26     _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:416:5)
    #27     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:171:12)

The code I use is your example:

Marquee(
          text: 'Some sample text that takes some space.',
          style: TextStyle(fontWeight: FontWeight.bold),
          scrollAxis: Axis.horizontal,
          crossAxisAlignment: CrossAxisAlignment.start,
          blankSpace: 20.0,
          velocity: 100.0,
          pauseAfterRound: Duration(seconds: 1),
          startPadding: 10.0,
          accelerationDuration: Duration(seconds: 1),
          accelerationCurve: Curves.linear,
          decelerationDuration: Duration(milliseconds: 500),
          decelerationCurve: Curves.easeOut,
 )

Flutter version:

[√] Flutter (Channel beta, v1.5.4-hotfix.2, on Microsoft Windows [Version 10.0.17763.503], locale en-US)
    • Flutter version 1.5.4-hotfix.2 at J:\program\flutter
    • Framework revision 7a4c33425d (2 weeks ago), 2019-04-29 11:05:24 -0700
    • Engine revision 52c7a1e849
    • Dart version 2.3.0 (build 2.3.0-dev.0.5 a1668566e5)

[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at J:\android\sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • ANDROID_HOME = J:\android\sdk
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)
    • All Android licenses accepted.

[√] Android Studio (version 3.4)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 35.3.1
    • Dart plugin version 183.6270
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)

[√] IntelliJ IDEA Community Edition (version 2019.1)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2019.1
    • Flutter plugin version 35.3.3
    • Dart plugin version 191.7141.49

[√] VS Code (version 1.33.1)
    • VS Code at C:\Users\Fajar\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.0.2

[√] Connected device (1 available)
    • SM G532G • 4200c83dceeb64b7 • android-arm • Android 6.0.1 (API 23)

• No issues found!

scrolling only starts with 1s delay

Text is displayed in multiline while adding Urdu Language

Scrolling is not proper when using Urdu language

No element bad state error

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following StateError was thrown building MarqueeText(dirty, dependencies: [Directionality, DefaultTextStyle, _LocalizationsScope-[GlobalKey#bca50], MediaQuery], state: _MarqueeTextState#f368a):
Bad state: No element

The relevant error-causing widget was:
MarqueeText file:///Users/abdulbasit/Desktop/Flutter%20Projects/Labaiik/libraries/widgets/lib/main_app_bar.dart:87:44
When the exception was thrown, this was the stack:
#0 List.last (dart:core-patch/growable_array.dart:255:5)
#1 _MarqueeTextState._getTextWidth (package:widgets/marquee_text.dart:684:18)
#2 _MarqueeTextState._initialize (package:widgets/marquee_text.dart:580:25)
#3 _MarqueeTextState.build (package:widgets/marquee_text.dart:689:5)
#4 StatefulElement.build (package:flutter/src/widgets/framework.dart:4744:28)
...

Ability to fade the edges

It will be nice to have the ability to fade the edges (always or wether it's scrolling or not)
I can do a new PR if you like the idea, but for this, the widget has to be rebuild before and after each pause.
I'm also planing on using the plugin fading_edge_scrollview for this, so let me know.
Thanks

even on word ,it still marquee

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.

Exception caught by rendering library

i used: marquee: ^1.3.1

and i calling that like
Marquee(
text: 'Some sample text that takes some space.',
)

but its a throw exception:
Exception caught by rendering library
The following assertion was thrown during performResize():
Horizontal viewport was given unbounded height.

velocity value would not be Effective right now

i try to wacth the value if velocity by provider,
when the velocity value change the speed will be effective always need the text play one times

 Selector<AllOne,Tuple5<String ,int,double,double,double >>(
                      shouldRebuild: (pre,next){
                        return pre!=next;
                      },
                      builder: (context, Tuple4Value, child) {
                        print('builderpriview${ Tuple4Value.item4}');
                        return  Marquee(
                          text:Tuple4Value.item1,
                          style: TextStyle(
                              color: GlobalConfig.colorList[Tuple4Value.item2], // fontSize: allone.currentFontSize,
                              letterSpacing: Tuple4Value.item5, fontSize: Tuple4Value.item3),
                          scrollAxis: Axis.horizontal,
                          velocity: Tuple4Value.item4,
                        );
                      }, selector: (context, setC)=>Tuple5(setC.displaytext,setC.textColorIndex,setC.fontsizeValue,setC.textSpeed,setC.letterSpacing)),

Thank you for your time

Add onDone

Please add a parameter called onDone. The parameter must be a function to be executed when the scrolling ends.

The getter 'visible' was called on null

Another exception was thrown: NoSuchMethodError: The getter 'visible' was called on null.
[VERBOSE-2:ui_dart_state.cc(166)] Unhandled Exception: NoSuchMethodError: The method 'toDouble' was called on null.
Receiver: null
Tried calling: toDouble()
#0      Object.noSuchMethod  (dart:core-patch/object_patch.dart:51:5)
#1      double.>  (dart:core-patch/double.dart:94:31)
#2      ScrollPosition._updateSemanticActions 
package:flutter/…/widgets/scroll_position.dart:472
#3      ScrollPosition.notifyListeners 
package:flutter/…/widgets/scroll_position.dart:809
#4      ScrollPosition.forcePixels 
package:flutter/…/widgets/scroll_position.dart:346
#5      ScrollPositionWithSingleContext.jumpTo 
package:flutter/…/widgets/scroll_position_with_single_context.dart:202
#6      ScrollController.jumpTo 
package:flutter/…/widgets/scroll_controller.dart:178
#7      _MarqueeState._makeRoundTrip 
package:marquee/marquee.dart:602
#8      _MarqueeState._scroll 
package:marquee/marquee.dart:536
#9      Future.doWhile.<anonymous closure>  (dart:async/future.dart:550:26)

marquee version 1.5.3

variable!=null?Marquee(
          text: variable['name']
 ):null

flutter doctor -V

[✓] Flutter (Channel stable, 1.20.2, on Mac OS X 10.15.5 19F101, locale zh-Hans-CN)
    • Flutter version 1.20.2 at /Users/as/Downloads/flutter
    • Framework revision bbfbf1770c (2 weeks ago), 2020-08-13 08:33:09 -0700
    • Engine revision 9d5b21729f
    • Dart version 2.9.1

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/as/Library/Android/sdk
    • Platform android-30, build-tools 29.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • CocoaPods version 1.8.4

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 48.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[!] IntelliJ IDEA Ultimate Edition (version 2019.2.4)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • For information about installing plugins, see
      https://flutter.dev/intellij-setup/#installing-the-plugins

[✓] VS Code (version 1.48.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.13.2

[✓] Connected device (1 available)
    • iPhone SE (2nd generation) (mobile) • F6C7B0C9-8B02-4C25-98AD-5431C314D99B • ios • com.apple.CoreSimulator.SimRuntime.iOS-13-6 (simulator)

Support custom CrossAxisAlignment

Add screenshots or gifs to the readme

Widget Build Error

Simply calling

Marquee(
 text: snapshot.data,
);

causes exception:

2020-01-20 17:11:59.552 E/flutter: [ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: NoSuchMethodError: The method 'toDouble' was called on null.
    Receiver: null
    Tried calling: toDouble()
    #0      Object.noSuchMethod (dart:core-patch/object_patch.dart:53:5)
    #1      double.> (dart:core-patch/double.dart:96:31)
    #2      ScrollPosition._updateSemanticActions (package:flutter/src/widgets/scroll_position.dart:466:16)
    #3      ScrollPosition.notifyListeners (package:flutter/src/widgets/scroll_position.dart:753:5)
    #4      ScrollPosition.forcePixels (package:flutter/src/widgets/scroll_position.dart:346:5)
    #5      ScrollPositionWithSingleContext.jumpTo (package:flutter/src/widgets/scroll_position_with_single_context.dart:200:7)
    #6      ScrollController.jumpTo (package:flutter/src/widgets/scroll_controller.dart:172:16)
    #7      _MarqueeState._makeRoundTrip (package:marquee/marquee.dart:517:17)
    #8      _MarqueeState._scroll (package:marquee/marquee.dart:451:11)
    #9      Future.doWhile.<anonymous closure> (dart:async/future.dart:534:26)
    #10     _rootRunUnary (dart:async/zone.dart:1134:38)
    #11     _CustomZone.runUnary (dart:async/zone.dart:1031:19)
    #12     _CustomZone.runUnaryGuarded (dart:async/zone.dart:933:7)
    #13     _CustomZone.bindUnaryCallbackGuarded.<anonymous closure> (dart:async/zone.dart:970:26)
    #14     Future.doWhile (dart:async/future.dart:549:18)
    #15     _MarqueeState.initState.<anonymous closure> (package:marquee/marquee.dart:445:16)
    #16     SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1108:15)
    #17     SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1055:9)
    #18     SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:963:5)
    #19     _rootRun (dart:async/zone.dart:1126:13)
    #20     _CustomZone.run (dart:async/zone.dart:1023:19)
    #21     _CustomZone.runGuarded (dart:async/zone.dart:925:7)
    #22     _invoke (dart:ui/hooks.dart:259:10)
    #23     _drawFrame (dart:ui/hooks.dart:217:3)

Version: 1.3.1
Flutter SDK: Channel dev - v1.13.9

Doesn't work in web

UnimplementedError

When I change the text, it doesn't pause at the end of the text

                              Consumer<AddressViewModel>(
                                builder: (context , viewModel , child){
                                  return Marquee(
                                    text: viewModel.address,
                                    blankSpace: 60.0,
                                    pauseAfterRound: Duration(seconds: 1),
                                  );
                                }
                              ),

The movement is strange when there is shadow in text style.

Text does not flow naturally when I run this code

Marquee(
            text: "Hello",
            style: TextStyle(
                color: Colors.green[100],
                fontSize: 100,
                shadows: [
                  Shadow(color: Colors.green[300], blurRadius: 20 / 2),
                  Shadow(color: Colors.green[400], blurRadius: 20),
                  Shadow(color: Colors.green[500], blurRadius: 20 * 3.0)
                ]
            ),
            scrollAxis: Axis.horizontal,
            crossAxisAlignment: CrossAxisAlignment.center,
            blankSpace: 20,
            velocity: 300,
            pauseAfterRound: Duration(seconds: 0),
            startPadding: 10.0,
          );
        }

scrolls really fast when resuming the app

Widget is detached early with startAfter causes Error

While using the new parameter startAfter, I get an error when the widget is detached before the timer runs out:

ScrollController not attached to any scroll views

I have fixed it for me and will provide a Pull request, please check it out :)

Allow rich text

only single child? not children?

Marquee(
child: Text('There once was a boy who told this story about a boy: "'),
)

i want marquee every time show some diffent thing not same thing?
such as ["aaa" ,"bbb","ccc"]
first time show Text("aaa");
second time show Text("bbb");
thrid time show Text("ccc");

i am not good at english ,thx

Add previews to README

Add some gifs to show what the package is capable of.

enable backwards scrolling / negative velocity

Problem with AppBar

Hello! I am trying to use Marquee with AppBar:

and I am getting the error:

What am I doing wrong?

Marquee 3.0

I'm thinking about rewriting the Marquee widget to use a custom RenderObject (lower-level Flutter API) so that it cannot only scroll text, but arbitrary widgets.
That would also fix #7, #9 and #14.

App freezes on screen auto-rotation

Horizontal scrolling marquee, iPhone or Android in Landscape. To trigger: Send app to background in landscape, rotate the phone, lock the orientation, wait around 60 seconds then wake the app in portrait. Flutter will attempt to rotate to portrait but will freeze with the previous landscape screen content rotated and scaled to portrait, control does not return on wake to be able to debug further.

Have eliminated other widgets during testing, with the Marquee replaced by a plain Text() widget the issue doesn't occur. I've tried 'StartAfter' with 2 seconds under 1.6.1 but it doesn't change the behaviour.

Note: Dimension values are orientation dependent. It's unclear whether Flutter has made the call to recalculate them on rotation due to not being able to debug.

    final _boardFontStyle = TextStyle(
      fontFamily: AppTheme.depListFont,
      fontWeight: FontWeight.w400,
      color: AppTheme.fontColourOrange,
      fontSize: dimensions.boardReferenceFontSize,
    );

    SizedBox(
        height: dimensions.boardRowHeight,
        width: dimensions.boardInfoWidth,
        child: 
        Marquee(
           text: information, 
           scrollAxis: Axis.horizontal,
            crossAxisAlignment: CrossAxisAlignment.start,
            blankSpace: dimensions.boardInfoWidth,
            velocity: 150.0,
            style: _boardFontStyle,
         ),
      )

information: Plumstead, Woolwich Arsenal, Charlton, Maze Hill, Greenwich, Deptford, London Bridge and London Cannon Street. A Southeastern service which has 8 coaches.
boardRowHeight: 30.0
boardInfoWidth: 521.0
boardRefereneFontSize: 32.0

Marquee 1.3.1 and 1.6.1 same behaviour

Flutter Doctor -v

[✓] Flutter (Channel stable, 1.22.2, on Mac OS X 10.15.5 19F101, locale en-GB)
    • Flutter version 1.22.2 at /users/markjenkins/applications/flutter
    • Framework revision 84f3d28555 (2 weeks ago), 2020-10-15 16:26:19 -0700
    • Engine revision b8752bbfff
    • Dart version 2.10.2

 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/markjenkins/Library/Android/sdk
    • Platform android-29, build-tools 29.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0, Build version 12A7209
    • CocoaPods version 1.9.1

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 48.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.50.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.15.1

[✓] Connected device (1 available)
    • Mark’s iPhone X (mobile) • 99fd963188a45f5e8894bad482ba7345e985280d • ios • iOS 14.0

Make text only slide if overflows

How to make the text only slide if it overflows?

It doesn't make sense to show only one string, right

The vertical marquee displays multiple sets of text,
For example, regularly updated headlines,
What's the point of having only one line of text constantly scrolling, especially vertical

[Feature request] Start delay?

Thanks for this plugin - it's great.

One addition that would be nice is a start delay feature. I'm embedding a marquee in a list tile, and it can be a little overwhelming to see every list tile start scrolling immediately after the list is presented.

I've seen start delays used in many other things that use marquees to solve this issue, and it'd be great to have in Flutter as well.

I'll try to make a PR myself.

Support fading text at both ends of the marquee

How can be use it with other page layout

I am new to Flutter. I have my page layout as below. I just want to add notification to the last line. But I do not want to wrap my other widget (_buildTableCalendar and _buildListEvent) that will destroy my table.
body: Center(
child: ListView(
children: [
Column(mainAxisSize: MainAxisSize.max, children: [
_buildTableCalendar(),
_buildListEvent()]

Exception while building and running

Everytime I try to build the project after adding this library, I get exception throw and the debug build stops
Exception thrown at

    await _makeRoundTrip();
    return _running && !isDone;
  }

A complete log is here:

I/flutter (19927): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (19927): The following assertion was thrown during performResize():
I/flutter (19927): Horizontal viewport was given unbounded width.
I/flutter (19927): Viewports expand in the scrolling direction to fill their container. In this case, a horizontal
I/flutter (19927): viewport was given an unlimited amount of horizontal space in which to expand. This situation
I/flutter (19927): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter (19927): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter (19927): there will always be enough horizontal space for the children. In this case, consider using a Row
I/flutter (19927): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter (19927): the width of the viewport to the sum of the widths of its children.
I/flutter (19927):
I/flutter (19927): The relevant error-causing widget was:
I/flutter (19927):   ListView
I/flutter (19927):   
package:marquee/marquee.dart:691
I/flutter (19927):
I/flutter (19927): When the exception was thrown, this was the stack:

I/flutter (19927): (elided 11 frames from class _RawReceivePortImpl, class _Timer, dart:async, and dart:async-patch)
I/flutter (19927):
I/flutter (19927): The following RenderObject was being processed when the exception was fired: RenderViewport#12a42 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
I/flutter (19927):   needs compositing
I/flutter (19927):   creator: Viewport ← IgnorePointer-[GlobalKey#6e389] ← Semantics ← _PointerListener ← Listener ←
I/flutter (19927):     _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#ae98d] ←
I/flutter (19927):     _PointerListener ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#33636] ←
I/flutter (19927):     RepaintBoundary ← ⋯
I/flutter (19927):   parentData: <none> (can use size)
I/flutter (19927):   constraints: BoxConstraints(unconstrained)
I/flutter (19927):   size: MISSING
I/flutter (19927):   axisDirection: right
I/flutter (19927):   crossAxisDirection: down
I/flutter (19927):   offset: ScrollPositionWithSingleContext#55548(offset: 0.0, range: null..null, viewport: null,
I/flutter (19927):     ScrollableState, NeverScrollableScrollPhysics -> ClampingScrollPhysics, IdleScrollActivity#1ad9d,
I/flutter (19927):     ScrollDirection.idle)
I/flutter (19927):   anchor: 0.0
I/flutter (19927): This RenderObject had the following descendants (showing up to depth 5):
I/flutter (19927):     center child: RenderSliverPadding#f57e1 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (19927):       child: RenderSliverList#d5a5a NEEDS-LAYOUT NEEDS-PAINT
I/flutter (19927): ════════════════════════════════════════════════════════════════════════════════════════════════════

Also, I use the widget inside Row widget for which I have looked at other issue and added the necessary Expanded widget as a parent one.
Please help.

Allow multiple text styles

migrate to nnbd

blocker mponkin/fading_edge_scrollview#11

Fading disappearing after every round

@Sauceee discovered an issue in #31:

I faced another issue, whenever the Marquee makes a round, the fade is gone for a second and it results into this:

If I set showFadingOnlyWhenScrolling to false, its not happening.

Just wondering if that is the desired behavior or not.

(This is not the desired behavior.)

Horizontal viewport was given unbounded height

I am trying to use Marquee in row, but its giving me above error. Below is my function, i tried adding Expanded around but still it throws exception.

Widget listCardView(index){
    return Container(
      margin: EdgeInsets.only(bottom: 10),
      child: Column(
        children: <Widget>[
          Container(
            height: 200,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage(ytResult[index].thumbnail['high']['url']),
                fit: BoxFit.fill,
              ),
          ),
          ),
          Container(
            margin: EdgeInsets.only(left: 10, top: 10, bottom: 10),
            child: Row(
              children: <Widget> [
                
                Column(
                  children: <Widget>[
                    Container(
                      height: 35,
                      // child: CircleAvatar(backgroundImage: ytResult[index].thumbnail['default']['url'],),
                    ),
                    Container()
                  ],
                ),
                Container(
                  margin: EdgeInsets.only(left: 10),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Expanded(child: Marquee(text: ytResult[index].title, style: TextStyle(fontSize:18.0),)
                      ),
                      // Text(ytResult[index].title, style: TextStyle(fontSize:18.0),),
                      Container(
                        child: Row(
                          children: <Widget>[
                            Text(ytResult[index].channelId, style: TextStyle(fontSize:10.0),),
                            Text(" ∙ ", style: TextStyle(fontSize:18.0),),
                            // Text(video.getViewCount() + " views", style: TextStyle(fontSize:18.0),),
                            // Text(" ∙ ", style: videoInfoStyle,),
                            Text(ytResult[index].publishedAt + " ago", style: TextStyle(fontSize:10.0),),
                          ],
                        ),
                      )
                    ],
                  ),
                )
              ]
            ),
          )
        ],
      ),
    );
  }`
```

How to add Image and Link on Marquee

How to add Image and Link on Marquee

Version 1.3 is broken

When using 1.3.0 the text doesn't scroll but when downgrading to 1.2.0 it works fine.

I can reproduce it even with the example.

Null safety

any estimated date for migration?

The following assertion was thrown building Marquee(dirty, dependencies: [MediaQuery, _LocalizationsScope-[GlobalKey#85ab8], DefaultTextStyle, Directionality], state: _MarqueeState#ab262):

I am trying to use the widget marquee and this is the code :
Marquee(
text: 'Some sample text that takes some space.',
style: TextStyle(fontWeight: FontWeight.bold),
scrollAxis: Axis.horizontal,
crossAxisAlignment: CrossAxisAlignment.start,
blankSpace: 20.0,
velocity: 100.0,
pauseAfterRound: Duration(seconds: 1),
showFadingOnlyWhenScrolling: true,
fadingEdgeStartFraction: 0.1,
fadingEdgeEndFraction: 0.1,
numberOfRounds: 3,
startPadding: 10.0,
accelerationDuration: Duration(seconds: 1),
accelerationCurve: Curves.linear,
decelerationDuration: Duration(milliseconds: 500),
decelerationCurve: Curves.easeOut,
);
and this is the error : -
Acceleration and deceleration phase overlap. To fix this, try a combination of these approaches:

• Make the text longer, so there's more room to animate within.
• Shorten the accelerationDuration or decelerationDuration.
• Decrease the velocity, so the duration to animate within is longer.
  'package:marquee/marquee.dart':
  Failed assertion: line 631 pos 9: '_linearDuration >= Duration.zero'

Support for RTL languages

Can I scroll up and down? Multiple data

What the use of `_makeRoundTrip` function

  /// Causes the controller to scroll one round.
  Future<void> _makeRoundTrip() async {
    // Reset the controller, then accelerate, move linearly and decelerate.
    _controller.jumpTo(_startPosition);
    if (!_running) return;

    await _accelerate();
    if (!_running) return;
    
    await _moveLinearly();
    if (!_running) return;

    await _decelerate();
    if (!_running) return;

    await Future.delayed(widget.pauseAfterRound);
  }

I'm confused to this _makeRoundTrip function, why there are three phase: accelerate/ linear/ decelerate?

my version for implement auto scroll is just use a infinite loop:

  @override
  void initState() {
    super.initState();

    _scrollController = ScrollController(initialScrollOffset: 0);
    _initState();

    Future.delayed(Duration(microseconds: 5000), () {
      Future.doWhile(() async {
        await _scroll();
        return true;
      });
    });
  }

  Future<void> _scroll() async {
    await _scrollController.animateTo(_scrollController.offset + (delta * 4),
        curve: Curves.linear, duration: Duration(seconds: 1));
  }

But this loop will cost more CPU load.

Jerk while playing the example

First of all, thanks for this widget.

While using the marquee widget, the text jerks after every x seconds.
Phone: Samsung s9+
Orientation: Landscape

My Code is :

child: Marquee(
velocity: double.parse(_currentBanner.duration) / 100,
texts: [ 'Some sample text.', 'Some other text.' ],
blankSpace: 20.0,
pauseAfterRound: Duration(seconds: 0),
startPadding: 10.0,
style: TextStyle(fontSize: double.parse(_currentBanner.font_size), color: Utils.hexToColor(_currentBanner.font_color)),
scrollAxis: Axis.horizontal),
)

Can you please look into it.

Support pausing between multiple texts

Now that we support multiple texts, it only makes sense to support pausing between them

Scrolling direction RIGHT to LEFT

Currently, horizontal scrolling is from left to right which is good but what about Arabic, Urdu and other such languages. Please enable right to left scrolling. Thanks