Marquee is a flutter widget that scrolls infinitely. It pauses after each round of scroll and has features like duration, curve and is highly customizable. It is used for large content delivery in most social media applications. It is generally used as a banner to make announcements in the application as it easily catches the eye of the user.
It is defined as below:
Syntax: 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, )
- text: It contains the text that is shown in the scroll.
- style: It is used to customize & design the scroll
- bankSpace: It determines the gap between each subsequent scrolls
- velocity: It determines the speed at which the scroll rolls the text
- pauseAfterRound: It is used to set after how many iterations the scroll must stop
Now, lest’s look into its implementation with a simple example.
Here we will be building a simple application with two scrolls. To do so follow the below steps:
1. Add the Dependency:
The marquee dependency should be added in the dependencies section of the pubspec.yaml file as shown below:
2. Import the Dependency:
To import the dependency to the main.dart file, use the following line of code:
3. Structuring the application:
At this stage we will give a simple structure to our app using a StatelessWidget extension as shown below:
4. Build the marquee:
We will be going to have two different sets of the marquee in the application. The first one will be fairly simple and be named as _buildMarquee and is defined as shown below:
The second marquee is where we will explore its properties as discussed above in the article. We will name the second marquee as _buildComplexMarquee and define it as below:
The gap between the first marquee and the second marquee is defined using a simple widget as follows:
Now add the marquee to the body of the app that we created in the 3rd step.
Complete Source Code: