How to Make Running Text Marquee Animation in Flutter App

In this example, you will learn to make running text marquee animation in Flutter App. It is like <marquee> Tag in HTML. You can use this Marquee widget for various purposes. See the example below:

First, you need to add marquee Flutter package in your project by adding the following lines in pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  marquee: ^2.2.0

How to Add Running Text Marquee in Flutter:

import 'package:marquee/marquee.dart';

Marquee(
    text: 'The quick brown fox jumps over the lazy dog',
    style: TextStyle(fontWeight: FontWeight.bold, fontSize:20), 
    scrollAxis: Axis.horizontal, //scroll direction
    crossAxisAlignment: CrossAxisAlignment.start,
    blankSpace: 20.0,
    velocity: 50.0, //speed
    pauseAfterRound: Duration(seconds: 1),
    startPadding: 10.0,
    accelerationDuration: Duration(seconds: 1),
    accelerationCurve: Curves.linear,
    decelerationDuration: Duration(milliseconds: 500),
    decelerationCurve: Curves.easeOut,
)

Full Dart/Flutter code example:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return MaterialApp(
         home: Home()
      );
  }
}

class Home extends  StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
         appBar: AppBar(
            title: Text("Marquee Running Text"),
            backgroundColor: Colors.redAccent
         ),
          body: Container(
             margin: EdgeInsets.all(30),
             alignment: Alignment.topCenter,
             child: Column(
                 children: [
                    Expanded(
                      child: Marquee(
                            text: 'The quick brown fox jumps over the lazy dog',
                            style: TextStyle(fontWeight: FontWeight.bold, fontSize:20), 
                            scrollAxis: Axis.horizontal, //scroll direction
                            crossAxisAlignment: CrossAxisAlignment.start,
                            blankSpace: 20.0,
                            velocity: 50.0, //speed
                            pauseAfterRound: Duration(seconds: 1),
                            startPadding: 10.0,
                            accelerationDuration: Duration(seconds: 1),
                            accelerationCurve: Curves.linear,
                            decelerationDuration: Duration(milliseconds: 500),
                            decelerationCurve: Curves.easeOut,
                        )
                    )
                 ],
             ),
          )
      );
  }
}

The output of this code is shown at the top, you can add a running text marquee in Flutter app like this.