zeba_academy_marquee #

A flexible and customizable Flutter marquee widget for horizontal and vertical scrolling content.

Create smooth scrolling text, announcements, banners, news tickers, notifications, promotional messages, and custom scrolling widgets with a simple and powerful API.

Features #

• ➡️ Right-to-left scrolling
• ⬅️ Left-to-right scrolling
• ⬆️ Bottom-to-top scrolling
• ⬇️ Top-to-bottom scrolling
• ⚡ Customizable scrolling speed
• 📏 Custom spacing between repeated content
• 🔁 Infinite looping
• ▶️ Auto-start support
• ⏸️ Pause and resume support
• 🖱️ Pause on hover
• 👆 Pause on tap
• 🎮 External controller support
• 🎨 Custom animation curves
• 📢 Start, stop, and cycle callbacks
• 🧩 Supports any Flutter widget
• 🪶 Lightweight
• 🚫 No external dependencies
• 📱 Works on mobile, desktop, and web

Installation #

Add zeba_academy_marquee to your pubspec.yaml:

dependencies:
  zeba_academy_marquee: ^0.0.1

Then run:

flutter pub get

Import the package:

import 'package:zeba_academy_marquee/zeba_academy_marquee.dart';

Basic Usage #

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

class MarqueeExample extends StatelessWidget {
  const MarqueeExample({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 50,
      child: ZebaMarquee(
        child: const Text(
          'Welcome to Zeba Academy Flutter Packages',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

Scrolling Directions #

Right to Left #

ZebaMarquee(
  direction: MarqueeDirection.rightToLeft,
  child: const Text('Right to Left'),
)

Left to Right #

ZebaMarquee(
  direction: MarqueeDirection.leftToRight,
  child: const Text('Left to Right'),
)

Bottom to Top #

SizedBox(
  height: 120,
  child: ZebaMarquee(
    direction: MarqueeDirection.bottomToTop,
    child: const Text(
      'Bottom to Top',
      style: TextStyle(fontSize: 20),
    ),
  ),
)

Top to Bottom #

SizedBox(
  height: 120,
  child: ZebaMarquee(
    direction: MarqueeDirection.topToBottom,
    child: const Text(
      'Top to Bottom',
      style: TextStyle(fontSize: 20),
    ),
  ),
)

Custom Speed #

Control the scrolling speed using the speed property:

ZebaMarquee(
  speed: 100,
  child: const Text('Fast scrolling text'),
)

Slower scrolling:

ZebaMarquee(
  speed: 20,
  child: const Text('Slow scrolling text'),
)

Higher values represent faster scrolling.

Custom Spacing #

Add space between repeated content:

ZebaMarquee(
  spacing: 80,
  child: const Text('Message with custom spacing'),
)

Pause on Hover #

Useful for desktop and web applications:

ZebaMarquee(
  pauseOnHover: true,
  child: const Text('Hover over me to pause'),
)

Pause on Tap #

Useful for mobile applications:

ZebaMarquee(
  pauseOnTap: true,
  child: const Text('Tap to pause and resume'),
)

Controller #

Use ZebaMarqueeController to control the marquee programmatically.

Create a Controller #

final marqueeController = ZebaMarqueeController();

Attach the Controller #

ZebaMarquee(
  controller: marqueeController,
  child: const Text('Controlled marquee'),
)

Start #

marqueeController.start();

Pause #

marqueeController.pause();

Resume #

marqueeController.resume();

Stop #

marqueeController.stop();

Reset #

marqueeController.reset();

Complete Controller Example #

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

class ControlledMarqueeExample extends StatefulWidget {
  const ControlledMarqueeExample({super.key});

  @override
  State<ControlledMarqueeExample> createState() =>
      _ControlledMarqueeExampleState();
}

class _ControlledMarqueeExampleState
    extends State<ControlledMarqueeExample> {
  final marqueeController = ZebaMarqueeController();

  @override
  void dispose() {
    marqueeController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          height: 60,
          child: ZebaMarquee(
            controller: marqueeController,
            child: const Text(
              'Controlled marquee content',
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
        const SizedBox(height: 16),
        Wrap(
          spacing: 8,
          children: [
            ElevatedButton(
              onPressed: marqueeController.start,
              child: const Text('Start'),
            ),
            ElevatedButton(
              onPressed: marqueeController.pause,
              child: const Text('Pause'),
            ),
            ElevatedButton(
              onPressed: marqueeController.resume,
              child: const Text('Resume'),
            ),
            ElevatedButton(
              onPressed: marqueeController.stop,
              child: const Text('Stop'),
            ),
            ElevatedButton(
              onPressed: marqueeController.reset,
              child: const Text('Reset'),
            ),
          ],
        ),
      ],
    );
  }
}

Callbacks #

onStart #

Called when the marquee starts:

ZebaMarquee(
  onStart: () {
    debugPrint('Marquee started');
  },
  child: const Text('Starting marquee'),
)

onStop #

Called when the marquee stops:

ZebaMarquee(
  onStop: () {
    debugPrint('Marquee stopped');
  },
  child: const Text('Stopping marquee'),
)

onCycle #

Called after a complete animation cycle:

ZebaMarquee(
  onCycle: () {
    debugPrint('Cycle completed');
  },
  child: const Text('Cycle callback'),
)

Custom Animation Curve #

ZebaMarquee(
  curve: Curves.easeInOut,
  child: const Text('Smooth marquee animation'),
)

Other examples:

ZebaMarquee(
  curve: Curves.linear,
  child: const Text('Linear marquee'),
)

ZebaMarquee(
  curve: Curves.easeOut,
  child: const Text('Ease out marquee'),
)

Custom Widgets #

ZebaMarquee supports any Flutter widget, not only text.

ZebaMarquee(
  spacing: 32,
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      const Icon(Icons.star),
      const SizedBox(width: 8),
      const Text('Featured'),
      const SizedBox(width: 16),
      ElevatedButton(
        onPressed: null,
        child: const Text('Explore'),
      ),
    ],
  ),
)

Announcement Banner Example #

Container(
  height: 50,
  padding: const EdgeInsets.symmetric(horizontal: 16),
  color: Colors.blue,
  child: ZebaMarquee(
    speed: 60,
    spacing: 80,
    child: const Text(
      '🎉 New courses are now available at Zeba Academy!',
      style: TextStyle(
        color: Colors.white,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
)

News Ticker Example #

SizedBox(
  height: 48,
  child: ZebaMarquee(
    direction: MarqueeDirection.rightToLeft,
    speed: 70,
    spacing: 100,
    child: const Text(
      'Breaking News • Flutter Updates • New Packages • Developer Resources',
      style: TextStyle(
        fontSize: 18,
        fontWeight: FontWeight.w600,
      ),
    ),
  ),
)

API Reference #

ZebaMarquee #

MarqueeDirection #

enum MarqueeDirection {
  rightToLeft,
  leftToRight,
  bottomToTop,
  topToBottom,
}

ZebaMarqueeController #

State properties:

marqueeController.isRunning

marqueeController.isPaused

Recommended Use Cases #

zeba_academy_marquee is useful for:

• 📢 Announcement banners
• 📰 News tickers
• 🏷️ Promotional messages
• 🎉 Event notifications
• 💬 Scrolling notifications
• 🛍️ E-commerce offers
• 📱 Social media-style scrolling content
• 🖥️ Desktop dashboards
• 🌐 Web applications
• 🚆 Travel and transport information
• 📊 Financial dashboards

Performance #

This package is designed to be lightweight:

• No external dependencies
• Uses Flutter's built-in animation system
• Uses AnimationController
• Supports controller-based lifecycle management
• Works with Flutter's standard widget tree
• Suitable for mobile, web, and desktop applications

For best performance:

• Prefer lightweight widgets as marquee children.
• Avoid placing very large widget trees inside a continuously animated marquee.
• Use const widgets wherever possible.
• Dispose controllers when they are no longer needed.

Testing #

Run static analysis:

flutter analyze

Run tests:

flutter test

Validate package publishing:

flutter pub publish --dry-run

License #

Copyright (C) 2026 Sufyan bin Uzayr.

This project is licensed under the GNU General Public License v3.0.

You may use, copy, modify, and distribute this software under the terms of the GPL-3.0 license.

See the LICENSE file for the complete license text.

About Me #

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

You can learn more about me and my work at:

https://sufyanism.com/

You can also connect with me on LinkedIn:

https://www.linkedin.com/in/sufyanism

Your All-in-One Learning Hub #

🚀 Explore courses and resources in coding, technology, and development at Zeba Academy.

Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience.

Explore Zeba Academy #

➡️ Main website:

https://zeba.academy

➡️ Courses and hands-on learning:

https://code.zeba.academy

➡️ YouTube tutorials:

https://www.youtube.com/@zeba.academy

➡️ Instagram:

https://www.instagram.com/zeba.academy/

Support the Project #

If you find this package useful:

• ⭐ Star the repository
• 🐛 Report issues
• 💡 Suggest improvements
• 📦 Share the package with other Flutter developers
• 🤝 Contribute to the project

Thank you for visiting and using zeba_academy_marquee! 💙

Built with ❤️ for the Flutter community by Zeba Academy.