A Flutter widget that scrolls text widget and other widget

Overview

marquee_widget

A Flutter widget that scrolls Widget Text and other Widget with supported RTL. Provides many customizationsincluding custom scroll directions and velocities, pausing after every round and specifying custom durations and curves for accelerating and decelerating.

Usage

This is a minimalistic example:

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

And here's a piece of code that makes full use of the marquee's customizability:

set Width and Height with Continer()

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,

)

Exmpale

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,
                  )),
                  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: Image.network(
                    "https://cdn-images-1.medium.com/max/1000/1*upTyVPOfBb0c4o1r57C9_w.png",
                    fit: BoxFit.fitHeight,
                  )),
                  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,
                              )))),
                  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(
                      child: Container(width: 1000,
                        child: Column(
                    children: <Widget>[
                        Marquee(
                            child: Container(
                                width: 1000,height: 260,
                                child: Image.network(
                                  "https://cdn-images-1.medium.com/max/1000/1*upTyVPOfBb0c4o1r57C9_w.png",
                                  fit: BoxFit.fitWidth,
                                ))),
                        Text(
                          "Flutter is a free and open source Google mobile UI ",
                          style: TextStyle(fontSize: 16),
                        ),
                    ],
                  ),
                      )),
                ],
              ),
            ),
          ),
        ],
      ),

LICENSE

Copyright (c) 2018 Marcel Garus

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Comments
  • add 1 way direction feature

    add 1 way direction feature

    hi, I was wondering if you could add a new feature to your package - one-way direction: this feature is very simple its just removing the back animation and just jumping to start (kind of a full loop), the text would all disappear in one side and reappear on the other side (just like Spotify does in his marquee) #

    opened by danielR2001 3
  • set number of iterations ?

    set number of iterations ?

    hi there, thanks for the component! we'd like to use it in our app, however is there a way that we can have it run once, then stop and only be able to scroll with finger/gesture ?

    opened by SogoGolf 1
  • dot

    dot "." at end go to front

    I notice wired behawior. If text is for example "test." In app i get ".test" if text is ".test" in app is "test." Some wired beahawior is with dot "." Why is this happen and what can be done with it beside manualy change string?

    This draft code corect behavior. String setDotInRightPlace(String t){ String a; if(t.endsWith('. ')){ a = t.substring(0, t.length-1); a = "."+a; } return a; }

    opened by kessero 1
  • Expose `Key` property for the main StatelessWidget

    Expose `Key` property for the main StatelessWidget

    I think because we don't have a way to set the Key, when the widget rebuilds too often, the Marquee resets the animation state.

    This might fix other open issues as well, if developers use their widgets giving a unique Key Can you please expose the Key property?

    opened by aytunch 0
  • Scrollbar in CupertinoApp Web

    Scrollbar in CupertinoApp Web

    Hi there!

    I'm using Marquee in a Flutter web app and noticed there are scrollbars visible and the text is also scrollable via a horizontal scrollwheel:

    image

    Is there a way to disable this?

    opened by ricardoboss 0
  • Fails in tests

    Fails in tests

    Hey! So I'm using marquee in my project, and have realized that it's causing some of my tests to fail. I didn't realize it was the reason until I added it to a widget in tests that already passed causing them to fail. This is the error output so I was wondering if you could give some guidance on how to work around this:

    Timer (duration: 0:00:01.000000, periodic: false), created:
    #0      new FakeTimer._ (package:fake_async/fake_async.dart:284:41)
    #1      FakeAsync._createTimer (package:fake_async/fake_async.dart:248:27)
    #2      FakeAsync.run.<anonymous closure> (package:fake_async/fake_async.dart:181:19)
    #6      Marquee.scroll (package:marquee_widget/marquee_widget.dart:54:22)
    <asynchronous suspension>
    (elided 3 frames from dart:async)
    
    Pending timers:
    Timer (duration: 0:00:01.000000, periodic: false), created:
    #0      new FakeTimer._ (package:fake_async/fake_async.dart:284:41)
    #1      FakeAsync._createTimer (package:fake_async/fake_async.dart:248:27)
    #2      FakeAsync.run.<anonymous closure> (package:fake_async/fake_async.dart:181:19)
    #6      Marquee.scroll (package:marquee_widget/marquee_widget.dart:54:22)
    #7      Marquee.build (package:marquee_widget/marquee_widget.dart:62:5)
    #8      StatelessElement.build (package:flutter/src/widgets/framework.dart:4662:28)
    #9      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4588:15)
    #10     Element.rebuild (package:flutter/src/widgets/framework.dart:4311:5)
    #11     StatelessElement.update (package:flutter/src/widgets/framework.dart:4669:5)
    #12     Element.updateChild (package:flutter/src/widgets/framework.dart:3370:15)
    #13     RenderObjectElement.updateChildren (package:flutter/src/widgets/framework.dart:5626:32
    
    The following assertion was thrown running a test:
    A Timer is still pending even after the widget tree was disposed.
    'package:flutter_test/src/binding.dart':
    Failed assertion: line 1236 pos 12: '!timersPending'
    
    When the exception was thrown, this was the stack:
    #2      AutomatedTestWidgetsFlutterBinding._verifyInvariants (package:flutter_test/src/binding.dart:1236:12)
    #3      TestWidgetsFlutterBinding._runTestBody (package:flutter_test/src/binding.dart:821:7)
    <asynchronous suspension>
    (elided 2 frames from class _AssertionError)
    
    

    I just took those snippets since the actual error message is pretty long 😅.

    Some help getting around this would be awesome since I would still love to use this library! Thanks.

    opened by joshpetit 1
  • Use a timer to handle scrolling

    Use a timer to handle scrolling

    Using an infinite loop to handle recurring calls to the "scroll" method causes a memory leak since it keeps running even after the component is rebuilt or replaced. I've replaced it with a RestartableTimer from the async plugin and refactored the widget as a StatefulWidget to cancel the timer and the ScrollController when dispose is called.

    opened by Jei 0
Releases(1.0.0)
Owner
Yousif Khalid
MSC Design and Manufacturing by using the computer, Mobile Apps Developer (Android & IOS), Team Leader.
Yousif Khalid
❤️Flutter ❤️ tips and tricks ❤️ Awesome Flutter ❤️ tips and tricks ❤️

❤️ Awesome Flutter ❤️ tips and tricks ❤️ Tip 1 : stless & stful We can type stless and stful and we get Autocomplete Suggestion to generate Stateless

Laxman Bhattarai 2.8k Dec 28, 2022
Flutter tips and tricks to make the development smoother and easier

Table of Contents Custom Clippers in Flutter Check if Website is Up or Down in Dart Section Titles on ListView in Flutter Circular Progress in Flutter

Praharsh Bhatt 17 Oct 11, 2022
A Collection of Flutter and Dart Tips and Tricks

A Collection of Flutter and Dart Tips and Tricks

Vandad Nahavandipoor 5.7k Dec 27, 2022
It says it all. Not In Flutter Docs, a sort of underground guide to flutter app development and design.

Not In Flutter Docs It says it all. Not In Flutter Docs, a sort of underground guide to flutter app development and design. Licenses Code is under BSD

Fred Grott 56 Dec 27, 2022
Based on Microsoft Fluent Design System and made using the help of Flutter VelocityX.

Vx Fluent UI for Flutter Based on Microsoft Fluent Design System and made using the help of Flutter VelocityX. VxFluentUI is a Flutter component libra

Pawan Kumar 14 Jan 28, 2022
A Flutter implementation of an expandable and animated floating search bar, also known as persistent search.

Material Floating Search Bar A Flutter implementation of an expandable floating search bar, also known as persistent search, similar to the ones used

null 390 Mar 3, 2022
Spreadsheet Decoder is a library for decoding spreadsheets for ODS and XLSX files.

Spreadsheet Decoder Spreadsheet Decoder is a library for decoding and updating spreadsheets for ODS and XLSX files. Usage On server-side import 'dart:

Stéphane Este-Gracias 41 Jan 5, 2023
Simple and easy-to-use Dart wrapper for HackerEarth API (Compile & Run)

HackerEarth API Simple and easy-to-use Dart wrapper for HackerEarth API which provides endpoints for compiling and running code in several languages.

Tirth 8 Dec 21, 2019
🎓Flutter TodoList tutorial

Todo List built with Flutter Built with Git Tutor This tutorial will walk you through the process of building of a simple todo-list with Flutter Getti

Andrei Lesnitsky 294 Dec 29, 2022
Highly Subjective Roadmap to Flutter Development

Flutter Roadmap Dev Environment https://learngitbranching.js.org Language https://dart.dev/guides/language/language-tour https://dart.dev/guides/langu

Oleksandr Leuschenko 4.3k Jan 2, 2023
Learn to Code While Building Apps - The Complete Flutter Development Bootcamp

Learn to Code While Building Apps - The Complete Flutter Development Bootcamp

London App Brewery 9.3k Dec 31, 2022
Learn Flutter in 30 Days

flutter_catalog A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Pawan Kumar 329 Dec 29, 2022
Personal Knowledge Base (PKB). Flutter Responsive Web, Desktop, Android, iOS app. MobX as state management.

PKB - Responsive Flutter Web / Desktop / Android / iOS "Personal Knowledge Base" app written on Flutter. >> View DEMO Video About project This project

Vladimir 21 Oct 10, 2022
Flutter Portfolio App Concept - Day 33

Flutter Portfolio App Concept - Day 33

Mohammad Rahmani 29 Nov 10, 2022
An awesome Flutter 3d project by Flutter_Cube package

flutter3d A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

Azamatjan 1 Oct 26, 2021
A curated list of awesome cheats needed to quickly get started with flutter development.

dart-cheat-sheet A curated list of awesome stuff needed to get started with your flutter development journey Table of Contents String interpolation Fu

Temidayo Adefioye 137 Jan 2, 2023
A flexible multi select package for Flutter. Make multi select widgets the way you want.

Multi Select Flutter Multi Select Flutter is a package for creating multi-select widgets in a variety of ways. Dialog BottomSheet ChoiceChip Features

null 177 Dec 20, 2022
Animal Sounds App written in flutter for the #100daysOfCode

animalsounds A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if

Antonio Giordano 0 Jan 9, 2022
Amazon Bookshelf Interface Design made in Flutter

amazon_ui_clone A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Emanoel Santana 0 Nov 25, 2021