Flutter – Marquee: An Elegant Text Animation Widget for Your Apps

Introduction:

In the ever-evolving world of mobile app development, user engagement and visual appeal play a crucial role in determining an application's success. Flutter, Google's open-source UI software development kit, has revolutionized the way developers create stunning and high-performing cross-platform applications. Among the plethora of widgets it offers, 'Flutter Marquee' stands out as a powerful text animation widget that brings life to your app's user interface.

In this blog post, we will dive into the world of Flutter Marquee, exploring its features, implementation, and how it can enhance the user experience in your applications.

What is Flutter Marquee?

Flutter Marquee is a versatile and dynamic text animation widget designed to create captivating scrolling effects for text elements in Flutter applications. It is particularly useful when you want to display content that exceeds the available screen space, such as news tickers, banners, announcements, or any text that needs to be animated horizontally or vertically.

Key Features of Flutter Marquee:

1. Directional Flexibility: Flutter Marquee allows you to scroll text both horizontally and vertically, giving you the freedom to create stunning and engaging UI designs that fit your app's requirements.
2. Customizable Speed and Delay: You can adjust the scrolling speed and delay between loops, enabling you to fine-tune the animation based on the content and desired user experience.
3. Control over Looping: You can choose between an infinite loop or a specific number of loops, allowing you to set the duration of the animation according to the context of your application.
4. Rich Text Support: Flutter Marquee seamlessly integrates with Flutter's rich text support, making it easy to display different text styles and inline widgets within the scrolling text.

Implementation of Flutter Marquee:

To use Flutter Marquee in your Flutter project, follow these steps:

Step 1: Add Dependency

First, add the dependency for the Flutter Marquee package in your project's 'pubspec.yaml' file:

dependencies:
  flutter:
    sdk: flutter
  flutter_marquee: ^latest_version

Step 2: Install Packages

Run the following command in your terminal to install the packages:

flutter pub get 

Step 3: Import Package

Import the Flutter Marquee package in your Dart file:

import 'package:flutter_marquee/flutter_marquee.dart';

Step 4: Implement Flutter Marquee

Now, you can use the Flutter Marquee widget in your UI code. Here's a simple example:

Marquee(
       str:'Welcome to Flutter Marquee! Scroll your text with style.',
       containerWidth: 300,
      textStyle: TextStyle(
            color: Colors.green.shade900,
            fontSize: 20,
            fontWeight: FontWeight.bold),
        baseMilliseconds: 10000)

Complete Source Code

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


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


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


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlutterforGeeks',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.green.shade900),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'FlutterforGeeks'),
    );
  }
}


class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});


  final String title;


  @override
  State<MyHomePage> createState() => _MyHomePageState();
}


class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Marquee(
                  str:
                      'Welcome to Flutter Marquee! Scroll your text with style.',
                  containerWidth: 300,
                  textStyle: TextStyle(
                      color: Colors.green.shade900,
                      fontSize: 20,
                      fontWeight: FontWeight.bold),
                  baseMilliseconds: 10000),
            )
          ],
        ),
      ),
    );
  }
}

GitHub Repository - Find the complete code for each example in this tutorial on GitHub.

Video Demo

Conclusion:

Flutter Marquee is an impressive text animation widget that adds flair and interactivity to your Flutter applications. With its easy implementation and customizable features, you can create eye-catching text animations that captivate your users' attention and keep them engaged with your content.

Whether you want to showcase news headlines, promotional messages, or any other text content, Flutter Marquee empowers you to create smooth and visually appealing scrolling effects. So, why wait? Enhance your app's user experience and take your Flutter development to the next level with Flutter Marquee!