Marquee: A Flutter Widget for Infinite Text Scrolling with Customization Options

The Marquee widget in Flutter provides a convenient way to create text that scrolls infinitely in a customizable manner. It offers a wide range of options for customizing the scroll direction, speed, pauses, and other aspects of the scrolling behavior.

Basic Usage

To create a simple marquee widget that scrolls a given text string, use the following code:

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

Customization Options

The Marquee widget offers numerous customization options to tailor the scrolling behavior to your specific needs:

Scroll Axis:

scrollAxis: Axis.horizontal,  // Scrolling horizontally
scrollAxis: Axis.vertical,    // Scrolling vertically

Text Alignment:

crossAxisAlignment: CrossAxisAlignment.start,  // Aligning text to the start of the widget
crossAxisAlignment: CrossAxisAlignment.end,    // Aligning text to the end of the widget

Blank Space:

blankSpace: 20.0,  // Adding blank space between the start/end of the text and the widget border

Velocity:

velocity: 100.0,  // Setting the scroll speed in pixels per second

Pause After Round:

pauseAfterRound: Duration(seconds: 1),  // Pausing the scroll for a specified duration after each round

Start Padding:

startPadding: 10.0,  // Adding padding to the start of the scrolling text

Acceleration Duration and Curve:

accelerationDuration: Duration(seconds: 1),  // Duration over which scroll speed accelerates
accelerationCurve: Curves.linear,          // Curve used for acceleration

Deceleration Duration and Curve:

decelerationDuration: Duration(milliseconds: 500),  // Duration over which scroll speed decelerates
decelerationCurve: Curves.easeOut,                // Curve used for deceleration

Example with Full Customization

The following code snippet demonstrates the use of the Marquee widget with all the available customization options:

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,
)

Conclusion

The Marquee widget in Flutter enables you to create easily customizable, infinite text scrolling effects. With its extensive range of options, you can tailor the scrolling behavior to suit your specific design and functionality requirements. Explore the API reference for more in-depth details and examples.