Flutter 跑马灯 最适合自己修改

完美搭配任何场景 主要有 垂直 和 水平 两种方向的

上图先

这里文字有点出来是因为我用的层叠布局 其它就没事了 不影响 这里水平跑马灯并不好 正常是要两段文本进行循环交替 这也很容易实现 只要再复制一个横向跑马灯 一前一后 不就循环了吗？  而我主要是要垂直的 由于时间关系不做操作 贴代码了

 

---

import 'package:flutter/material.dart';
import 'package:zwt_life_flutter_app/common/style/GlobalStyle.dart';

//公告栏动画 垂直淡入淡出
class MyNoticeVecAnimation extends StatefulWidget {
  final Duration duration;
  final List messages;

  const MyNoticeVecAnimation({
    Key key,
    this.duration = const Duration(milliseconds: 3000),
    this.messages,
  }) : super(key: key);

  @override
  _MyNoticeVecAnimationState createState() {
    // TODO: implement createState
    return _MyNoticeVecAnimationState();
  }
}

class _MyNoticeVecAnimationState extends State
    with TickerProviderStateMixin {
  AnimationController _controller;

  int _nextMassage = 0;

  //透明度
  Animation _opacityAni1, _opacityAni2;

  //位移
  Animation _positionAni1, _positionAni2;

  @override
  Widget build(BuildContext context) {
    _startVerticalAni();
    //正向开启动画
    // TODO: implement build
    return SlideTransition(
      position: _positionAni2,
      child: FadeTransition(
        opacity: _opacityAni2,
        child: SlideTransition(
          position: _positionAni1,
          child: FadeTransition(
            opacity: _opacityAni1,
            child: Text(
              widget.messages[_nextMassage],
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: GlobalConstant.middleText,
            ),
          ),
        ),
      ),
    );
  }


  //纵向滚动
  void _startVerticalAni() {
    // TODO: implement initState
    _controller = AnimationController(duration: widget.duration, vsync: this);

    _opacityAni1 = Tween(begin: 0.0, end: 1.0).animate(
      CurvedAnimation(
          parent: _controller, curve: Interval(0.0, 0.1, curve: Curves.linear)),
    );

    _opacityAni2 = Tween(begin: 1.0, end: 0.0).animate(
      CurvedAnimation(
          parent: _controller, curve: Interval(0.9, 1.0, curve: Curves.linear)),
    );

    _positionAni1 = Tween(
      begin: const Offset(0.0, 1.0),
      end: const Offset(0.0, 0.0),
    ).animate(
      CurvedAnimation(
          parent: _controller, curve: Interval(0.0, 0.1, curve: Curves.linear)),
    );

    _positionAni2 = Tween(
      begin: const Offset(0.0, 0.0),
      end: const Offset(0.0, -1.0),
    ).animate(
      CurvedAnimation(
          parent: _controller, curve: Interval(0.9, 1.0, curve: Curves.linear)),
    );

    _controller
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          setState(() {
            _nextMassage++;
            if (_nextMassage >= widget.messages.length) {
              _nextMassage = 0;
            }
          });
          _controller.reset();
          _controller.forward();
        }
        if (status == AnimationStatus.dismissed) {
          _controller.forward();
        }
      });
    _controller.forward();
  }

  //释放
  @override
  void dispose() {
    _controller.dispose();
    // TODO: implement dispose
    super.dispose();
  }
}

  

---

import 'package:flutter/material.dart';
import 'package:zwt_life_flutter_app/common/style/GlobalStyle.dart';

//公告栏动画 水平淡入淡出
class MyNoticeHorAnimation extends StatefulWidget {
  final Duration duration;
  final List messages;

  const MyNoticeHorAnimation({
    Key key,
    this.duration = const Duration(milliseconds: 3000),
    this.messages,
  }) : super(key: key);

  @override
  _MyNoticeHorAnimationState createState() {
    // TODO: implement createState
    return _MyNoticeHorAnimationState();
  }
}

class _MyNoticeHorAnimationState extends State
    with TickerProviderStateMixin {
  AnimationController _controller;

  int _nextMassage = 0;

  //透明度
  Animation _opacityAni1, _opacityAni2;

  //位移
  Animation _positionAni1, _positionAni2;

  @override
  Widget build(BuildContext context) {
    _startHorizontalAni();
    //正向开启动画
    // TODO: implement build
    return SlideTransition(
      position: _positionAni2,
      child: FadeTransition(
        opacity: _opacityAni2,
        child: SlideTransition(
          position: _positionAni1,
          child: FadeTransition(
            opacity: _opacityAni1,
            child: Text(
              widget.messages[_nextMassage],
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: GlobalConstant.middleText,
            ),
          ),
        ),
      ),
    );
  }

  //横向滚动
  void _startHorizontalAni() {
    // TODO: implement initState
    _controller = AnimationController(duration: widget.duration, vsync: this);

    _opacityAni1 = Tween(begin: 1.0, end: 1.0).animate(
      CurvedAnimation(
          parent: _controller, curve: Interval(0.0, 0.0, curve: Curves.linear)),
    );

    _opacityAni2 = Tween(begin: 1.0, end: 1.0).animate(
      CurvedAnimation(
          parent: _controller, curve: Interval(0.0, 0.0, curve: Curves.linear)),
    );

    _positionAni1 = Tween(
      begin: const Offset(1.0, 0.0),
      end: const Offset(0.0, 0.0),
    ).animate(
      CurvedAnimation(
          parent: _controller, curve: Interval(0.0, 0.5, curve: Curves.linear)),
    );

    _positionAni2 = Tween(
      begin: const Offset(0.0, 0.0),
      end: const Offset(-1.0, 0.0),
    ).animate(
      CurvedAnimation(
          parent: _controller, curve: Interval(0.5, 1.0, curve: Curves.linear)),
    );

    _controller
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          setState(() {
            _nextMassage++;
            if (_nextMassage >= widget.messages.length) {
              _nextMassage = 0;
            }
          });
          _controller.reset();
          _controller.forward();
        }
        if (status == AnimationStatus.dismissed) {
          _controller.forward();
        }
      });
    _controller.forward();
  }

  //释放
  @override
  void dispose() {
    _controller.dispose();
    // TODO: implement dispose
    super.dispose();
  }
}

 

---

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:zwt_life_flutter_app/common/style/GlobalStyle.dart';
import 'package:zwt_life_flutter_app/widget/GSYWidget/MySearchInputWidget.dart';
import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';
import 'package:zwt_life_flutter_app/widget/GSYWidget/animation/MyNoticeHorAnimation.dart';
import 'package:zwt_life_flutter_app/widget/GSYWidget/animation/MyNoticeVecAnimation.dart';

class HomePage extends StatefulWidget {
  static final String sName = "Home";

  @override
  _HomePageState createState() {
    // TODO: implement createState
    return _HomePageState();
  }
}

class _HomePageState extends State with TickerProviderStateMixin {
  var hotSearchTag = [
    "网曝杨紫邓伦热恋 | 元宵节诗词 | 身份证异地能补办吗",
    "两限房是什么意思 | 公务员可以考研吗 | 一元等于多少日元",
    "喻恩泰喊话王景春 | 云南结婚吹唢呐视频 | 汉服下裙穿法"
  ];



  @override
  void initState() {
    // TODO: implement initState
    super.initState();

  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    FlutterStatusbarcolor.setStatusBarWhiteForeground(true);
    return Scaffold(
      appBar: AppBar(backgroundColor: Colors.black54, actions: [
        Stack(alignment: Alignment.centerLeft, //指定未定位或部分定位widget的对齐方式
            children: [
              Container(
                decoration: new BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(4.0)),
                    color: Colors.white,
                    border: new Border.all(
                        color: Theme.of(context).primaryColor, width: 0.3),
                    boxShadow: [
                      BoxShadow(
                          color: Theme.of(context).primaryColorDark,
                          blurRadius: 4.0)
                    ]),
                padding: new EdgeInsets.only(right: ScreenUtil().setWidth(600)),
                margin: EdgeInsets.only(top: 8.0, bottom: 8.0, right: 10.0),
              ),
              Positioned(
                left: 5.0,
                child: Icon(Icons.search, size: 18.0, color: Colors.black38),
              ),
              Positioned(
                left: 23.0,
                right: 1.0,
                child: MyNoticeHorAnimation(duration: const Duration(milliseconds: 6000),messages: hotSearchTag)
              )
            ]),
        Container(
          margin: EdgeInsets.only(top: 5.0, right: 10.0),
          child: GestureDetector(
            child: Row(
              children: [
                Column(
                  children: [
                    Icon(
                      Icons.camera_alt,
                      color: Colors.white,
                    ),
                    Text(
                      "发布",
                      style: TextStyle(color: Colors.white, fontSize: 12.0),
                    )
                  ],
                ),
              ],
            ),
          ),
        ),
      ]),
    );
  }
}

flutter更新频繁 我这里不上传项目了  在HomePage界面 我就传入时间和数组就可以用了 很方便