Skip to content

Instantly share code, notes, and snippets.

@nhancv
Created March 4, 2021 16:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nhancv/6a86abe288345126d3e6b25970311ea3 to your computer and use it in GitHub Desktop.
Save nhancv/6a86abe288345126d3e6b25970311ea3 to your computer and use it in GitHub Desktop.
Flutter marquee long text

w_marquee.dart

import 'package:flutter/material.dart';

class WMarquee extends StatefulWidget {
  const WMarquee({
    @required this.child,
    this.padding,
    this.scrollDirection = Axis.horizontal,
    this.animationDuration = const Duration(milliseconds: 5000),
    this.backDuration = const Duration(milliseconds: 5000),
    this.pauseDuration = const Duration(milliseconds: 1200),
  });

  final Widget child;
  final EdgeInsetsGeometry padding;
  final Axis scrollDirection;
  final Duration animationDuration, backDuration, pauseDuration;

  @override
  _WMarqueeState createState() => _WMarqueeState();
}

class _WMarqueeState extends State<WMarquee> {
  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.scrollDirection,
      padding: widget.padding,
      controller: scrollController,
    );
  }

  Future<void> scroll() async {
    while (scrollController.hasClients) {
      await Future<void>.delayed(widget.pauseDuration);
      if (scrollController.hasClients)
        await scrollController.animateTo(
            scrollController.position.maxScrollExtent,
            duration: widget.animationDuration,
            curve: Curves.ease);
      await Future<void>.delayed(widget.pauseDuration);
      if (scrollController.hasClients)
        await scrollController.animateTo(0.0,
            duration: widget.backDuration, curve: Curves.easeOut);
    }
  }
}

use

WMarquee(
  scrollDirection: Axis.horizontal,
  padding: EdgeInsets.symmetric(horizontal: 5.W),
  child: Text('nhancv handsome long text handsome long text'),
),
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment