How to make a Text widget act like marquee when the text overflows in Flutter How to make a Text widget act like marquee when the text overflows in Flutter dart dart

How to make a Text widget act like marquee when the text overflows in Flutter


This widget is what i came up with, and I think it serves your needs:

class MarqueeWidget extends StatefulWidget {  final Widget child;  final Axis direction;  final Duration animationDuration, backDuration, pauseDuration;  MarqueeWidget({    @required this.child,    this.direction: Axis.horizontal,    this.animationDuration: const Duration(milliseconds: 3000),    this.backDuration: const Duration(milliseconds: 800),    this.pauseDuration: const Duration(milliseconds: 800),  });  @override  _MarqueeWidgetState createState() => _MarqueeWidgetState();}class _MarqueeWidgetState extends State<MarqueeWidget> {  ScrollController scrollController;  @override  void initState() {    scrollController = ScrollController(initialScrollOffset: 50.0);    WidgetsBinding.instance.addPostFrameCallback(scroll);    super.initState();  }  @override  void dispose(){    scrollController.dispose();    super.dispose();  }  @override  Widget build(BuildContext context) {    return SingleChildScrollView(      child: widget.child,      scrollDirection: widget.direction,      controller: scrollController,    );  }  void scroll(_) async {    while (scrollController.hasClients) {        await Future.delayed(widget.pauseDuration);        if(scrollController.hasClients)          await scrollController.animateTo(              scrollController.position.maxScrollExtent,              duration: widget.animationDuration,              curve: Curves.ease);        await Future.delayed(widget.pauseDuration);        if(scrollController.hasClients)          await scrollController.animateTo(0.0,              duration: widget.backDuration, curve: Curves.easeOut);    }  }}

Its functionality should be pretty obvious. An example implementation would look like this:

class FlutterMarqueeText extends StatefulWidget {  @override  _FlutterMarqueeTextState createState() => _FlutterMarqueeTextState();}class _FlutterMarqueeTextState extends State<FlutterMarqueeText> {  @override  Widget build(BuildContext context) {    return Scaffold(        appBar: AppBar(          title: Text("Flutter Marquee Text"),        ),        body: Center(          child: SizedBox(              width: 200.0,              child: MarqueeWidget(                  direction: Axis.horizontal,                  child: Text(                      "This text is to long to be shown in just one line"))),        ));  }}


You can do it using a marquee package

marquee widget that scrolls text infinitely. Provides many customizations including custom scroll directions, durations, curves as well as pauses after every round.

to use added marquee dependencies in the pubspec.yaml file

dependencies:  marquee: ^2.1.0

To import the dependency to your file, use the following line of code:

import 'package:marquee/marquee.dart';

You can use it like this and this is simple without any parameter property

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

And you can also be using some properties and customizability like below

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

enter image description here