Blog

You are currently viewing Flutter Marquee Example

Flutter Marquee Example

If you have a long line of text that you don't want to or do not the space for splitting in multiple lines, then a marquee effect is what you need. This effect causes text to be auto-scrolled horizontally, infinitely or not. The text is typically scrolled at a speed whereby the user can comfortably read.

This tutorial will explore examples of marquee in flutter, how you can include it your flutter app.

(a). Use marquee plugin

marquee is a Flutter widget that scrolls text infinitely.

It also Provides many customizations including custom scroll directions, durations, curves as well as pauses after every round.

So how do you use this plugin?

Step 1: Install it

Start by installing it. You do that by adding the plugin in your pubspec.yaml as follows:

dependencies:
  marquee: ^2.2.0

Then sync your editor to fetch it or you can also sync via this command:

flutter pub get

Step 2: Write Code

Start by importing the marquee package as follows:

import 'package:marquee/marquee.dart';

Then here is you scroll text using a single line of code:

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

If you want to include more customizations to the marquee, you do so as follows:

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

Full Example

Let's look at a full example. Start by installing the plugin as has been discussed earlier.

Then import both marquee and material packages:

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

In the main method we will run our app as follows:

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

But first you have to create that app as a StatefulWidget class:

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

Because it is a statefulwidget you need to create the state class:

class _MyAppState extends State<MyApp> {

An instance field will be defined:

  bool _useRtlText = false;

Then build the page for the app, returning a materialApp:

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Marquee',
      home: Scaffold(
        backgroundColor: Colors.deepOrange,
        body: ListView(
          padding: EdgeInsets.only(top: 50.0),
          children: [
            _buildMarquee(),
            _buildComplexMarquee(),
          ].map(_wrapWithStuff).toList(),
        ),
        floatingActionButton: FloatingActionButton.extended(
          onPressed: () => setState(() => _useRtlText = !_useRtlText),
          label: !_useRtlText
              ? const Text('Switch to Hebrew')
              : const Text('החלף לאנגלית'),
          backgroundColor: Colors.pink,
        ),
      ),
    );
  }

Also included is a function to build the marquee and return it as a widget:

  Widget _buildMarquee() {
    return Marquee(
      key: Key("$_useRtlText"),
      text: !_useRtlText
          ? 'There once was a boy who told this story about a boy: "'
          : 'פעם היה ילד אשר סיפר סיפור על ילד:"',
      velocity: 50.0,
    );
  }

Here is how you build a more complex marquee with customizations:

  Widget _buildComplexMarquee() {
    return Marquee(
      key: Key("$_useRtlText"),
      text: !_useRtlText
          ? '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,
      textDirection: _useRtlText ? TextDirection.rtl : TextDirection.ltr,
    );
  }

Here is the full code:

main.dart

import 'package:flutter/material.dart';
import 'package:marquee/marquee.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  bool _useRtlText = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Marquee',
      home: Scaffold(
        backgroundColor: Colors.deepOrange,
        body: ListView(
          padding: EdgeInsets.only(top: 50.0),
          children: [
            _buildMarquee(),
            _buildComplexMarquee(),
          ].map(_wrapWithStuff).toList(),
        ),
        floatingActionButton: FloatingActionButton.extended(
          onPressed: () => setState(() => _useRtlText = !_useRtlText),
          label: !_useRtlText
              ? const Text('Switch to Hebrew')
              : const Text('החלף לאנגלית'),
          backgroundColor: Colors.pink,
        ),
      ),
    );
  }
  Widget _buildMarquee() {
    return Marquee(
      key: Key("$_useRtlText"),
      text: !_useRtlText
          ? 'There once was a boy who told this story about a boy: "'
          : 'פעם היה ילד אשר סיפר סיפור על ילד:"',
      velocity: 50.0,
    );
  }
  Widget _buildComplexMarquee() {
    return Marquee(
      key: Key("$_useRtlText"),
      text: !_useRtlText
          ? '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,
      textDirection: _useRtlText ? TextDirection.rtl : TextDirection.ltr,
    );
  }
  Widget _wrapWithStuff(Widget child) {
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: Container(height: 50.0, color: Colors.white, child: child),
    );
  }
}

Run

Here is how you can run the project:

  1. Install the project as has been discussed.
  2. Copy the above main.dart code into your main.dart.

Or you can download the whole project below.

Reference

Download the whole example below:

No. Link
1. Download code
2. Read more

(b). marquee_widget

A Flutter widget that scrolls text widget and other widgets.

It with supported RTL. It also provides many customizations including:

  1. Custom scroll directions
  2. Custom velocities
  3. Pausing after every round
  4. Specifying custom durations and curves for accelerating and decelerating.
  5. It's able to scroll other widgets apart from text.

Here is a demo of this widget in action:

Flutter Marquee WIdget

Step 1: Install it

Start by installing this widget by aadding it as a dependency in your pubspec file:

dependencies:
  marquee_widget: ^1.2.0

Then flutter pub get to fetch it or click the sync button if it is provided by your editor.

Step 2: Write Dart code

Then import the widget:

import 'package:marquee_widget/marquee_widget.dart';

For example here is how you scroll simple text:

Marquee(
  child:Text( 'This project is a starting point for a Dart package, a library module containing code that can be shared easily across multiple Flutter or Dart projects. '),
)

Here is a text scrolling example but with customizations:

Marquee(
  child:Text( 'This project is a starting point for a Dart package'),
  scrollAxis: Axis.horizontal,
  textDirection : TextDirection.rtl,
  animationDuration: Duration(seconds: 1),
  backDuration: Duration(milliseconds: 5000),
  pauseDuration: Duration(milliseconds: 2500),
  directionMarguee: DirectionMarguee.oneDirection,
)

Full Example

Here is a full example:

import 'package:flutter/material.dart';
import 'package:marquee_widget/marquee_widget.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Marquee',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Marquee Home Page'),
      ),
      body: GridView.count(
        crossAxisCount: 2,
        childAspectRatio: 0.7,
        children: <Widget>[
          GridTile(
            child: Card(
              child: Column(
                children: <Widget>[
                  Expanded(
                      child: Image.network(
                    'https://i.pinimg.com/564x/9d/a6/36/9da636b9e60ea40b18921b0053b7d486.jpg',
                    fit: BoxFit.fitHeight,
                    filterQuality: FilterQuality.high,
                  )),
                  Marquee(
                    child: Text(
                      'Flutter is a free and open source Google mobile UI . ',
                      style: TextStyle(fontSize: 16),
                    ),
                    autoRepeat: false,
                  ),
                ],
              ),
            ),
          ),
          GridTile(
            child: Card(
              child: Column(
                children: <Widget>[
                  Expanded(
                      child: Image.network(
                    'https://cdn-images-1.medium.com/max/1000/1*upTyVPOfBb0c4o1r57C9_w.png',
                    fit: BoxFit.fitHeight,
                    filterQuality: FilterQuality.high,
                  )),
                  Marquee(
                      child: Text(
                    'Flutter is a free and open source Google mobile UI. ',
                    style: TextStyle(fontSize: 16),
                  )),
                ],
              ),
            ),
          ),
          GridTile(
            child: Card(
              child: Column(
                children: <Widget>[
                  Expanded(
                      child: Marquee(
                          child: Container(
                              width: 1000,
                              child: Image.network(
                                'https://i.pinimg.com/564x/9d/a6/36/9da636b9e60ea40b18921b0053b7d486.jpg',
                                fit: BoxFit.fitWidth,
                                filterQuality: FilterQuality.high,
                              )))),
                  Marquee(
                      child: Text(
                    'Flutter is a free and open source Google mobile UI... ',
                    style: TextStyle(fontSize: 16),
                  )),
                ],
              ),
            ),
          ),
          GridTile(
            child: Card(
              child: Column(
                children: <Widget>[
                  Marquee(
                      textDirection: TextDirection.rtl,
                      directionMarguee: DirectionMarguee.oneDirection,
                      child: Container(
                        width: 1000,
                        child: Column(
                          children: <Widget>[
                            Container(
                                width: 1000,
                                height: 260,
                                child: Image.network(
                                  'https://cdn-images-1.medium.com/max/1000/1*upTyVPOfBb0c4o1r57C9_w.png',
                                  fit: BoxFit.fitWidth,
                                  filterQuality: FilterQuality.high,
                                )),
                            Text(
                              'Flutter is a free and open source Google mobile UI ',
                              style: TextStyle(fontSize: 16),
                            ),
                          ],
                        ),
                      )),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Download

Download the code below:

No. Link
1. Read more
2. Download code
3. Follow code author

Leave a Reply