Flutter – Marquee

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

Key Parameters:

• text: It contains the text that is shown in the scroll.
• style: It is used to customize & design the scroll
• blankSpace: 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, let’s look into its implementation with a simple example.

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:

import 'package:marquee/marquee.dart';

3. Structuring the application:

At this stage we will give a simple structure to our app using a StatelessWidget extension as shown below:

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Marquee',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GeeksForGeeks'),
          backgroundColor: Colors.green,
        ),
        body:
      ),
    );
  }

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:

Dart

Widget _buildMarquee() {
  return Marquee(
    text: 'GeeksforGeeks.org was created'
        ' with a goal in mind to provide well written,'
        ' well thought and well explained solutions for'
        ' selected questions. The core team of five super geeks constituting'
        ' of technology lovers and computer science enthusiasts'
        ' have been constantly working in this direction ',
  );
}

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:

Dart

Widget _buildComplexMarquee() {
  return Marquee(
    text: 'GeeksforGeeks is a one-stop destination for programmers.',
    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,
  );
}

The gap between the first marquee and the second marquee is defined using a simple widget as follows:

Dart

  Widget _wrapWithStuff(Widget child) {
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: Container(height: 50.0, color: Colors.white, child: child),
    );
  }
}

Now add the marquee to the body of the app that we created in the 3rd step.

Complete Source Code:

Dart

import 'package:flutter/material.dart';
import 'package:marquee/marquee.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override

  // root of the application
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Marquee',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GeeksForGeeks'),
          backgroundColor: Colors.green,
        ),
        body: ListView(
          padding: EdgeInsets.only(top: 50.0),
          children: [
            _buildMarquee(),
            _buildComplexMarquee(),
          ].map(_wrapWithStuff).toList(),
        ),
      ),
    );
  }

  // Primary Marquee text
  Widget _buildMarquee() {
    return Marquee(
      text: 'GeeksforGeeks.org was created'
          ' with a goal in mind to provide well written,'
          ' well thought and well explained solutions for'
          ' selected questions. The core team of five super geeks constituting'
          ' of technology lovers and computer science enthusiasts'
          ' have been constantly working in this direction ',
    );
  }

  //Secondary Marquee text
  Widget _buildComplexMarquee() {
    return Marquee(
      text: 'GeeksforGeeks is a one-stop destination for programmers.',
      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,
    );
  }

  // Styling the Marquee
  Widget _wrapWithStuff(Widget child) {
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: Container(height: 50.0, color: Colors.white, child: child),
    );
  }
}

Output: