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

enter image description here
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 {
  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);
    }
  }
}

Uses:
class FlutterMarqueeText extends StatefulWidget {
  @override
  _FlutterMarqueeTextState createState() => _FlutterMarqueeTextState();
}

class _FlutterMarqueeTextState extends State {
  @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"))),
        ));
  }
}

Post a Comment

Previous Post Next Post

Subscribe Us


Get tutorials, Flutter news and other exclusive content delivered to your inbox. Join 1000+ growth-oriented Flutter developers subscribed to the newsletter

100% value, 0% spam. Unsubscribe anytime