Flutter 数字滚动效果(两列)

话不多说先上效果图

数字滚动效果.gif

实现原理分析

• 数据源头：0-10数字，最后一个为你想要的数字
• 在外层包裹一个Container,里面为SingleChildView
• 两列，SingleChildView设置controller和滚动效果：curve以及时长
• 滚动到底部即可

源码如下：

/// 数字滚动效果
///
/// created by hujintao
/// created at 2020-03-12
//
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
class RollingText extends StatefulWidget {
  int leftNum;
  int rightNum;

  Color textColor;

  RollingText({
    this.leftNum = 3,
    this.rightNum = 7,
    this.textColor = const Color(0xffED9CBE),
  });

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

class _RollingTextState extends State {
  List leftData = [];
  List rightData = [];

  ScrollController leftView = ScrollController();

  ScrollController rightView = ScrollController();

  void _leftToEnd() {
    leftView.animateTo(leftView.position.maxScrollExtent,
        duration: Duration(milliseconds: 800), curve: Curves.easeIn);
  }

  void _rightToEnd() {
    rightView.animateTo(rightView.position.maxScrollExtent,
        duration: Duration(milliseconds: 1000), curve: Curves.easeInOut);
  }

  @override
  void initState() {
    super.initState();

    leftData = [1, 2, 3, 4, 5, 6, 7, 8, 9, this.widget.leftNum];
    rightData = [1, 2, 3, 4, 5, 6, 7, 8, 9, this.widget.rightNum];
  }

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

    Future.delayed(Duration(milliseconds: 300), () async {
      if  (this.widget.leftNum != 0){
        _leftToEnd();
      }
      _rightToEnd();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          //left
          this.widget.leftNum != 0 ?  Container(
            child: SingleChildScrollView(
              controller: leftView,
              child: Column(
                children: leftData.map((num) {
                  return Container(
                    child: Center(
                      child: Text(
                        '${num}',
                        style: TextStyle(
                            color: this.widget.textColor,
                            fontSize: ScreenUtil().setSp(36)),
                      ),
                    ),
                  );
                }).toList(),
              ),
            ),
//            width: ScreenUtil().setWidth(40),
            height: ScreenUtil().setWidth(40),
          ) : Container(),
          // right
          Container(
            child: SingleChildScrollView(
              controller: rightView,
              child: Column(
                children: rightData.map((num) {
                  return Container(
                    child: Center(
                      child: Text(
                        '${num}',
                        style: TextStyle(
                            color: this.widget.textColor,
                            fontSize: ScreenUtil().setSp(36)),
                      ),
                    ),
                  );
                }).toList(),
              ),
            ),
//            width: ScreenUtil().setWidth(40),
            height: ScreenUtil().setWidth(40),
          ),
        ],
      ),
    );
  }
}

//使用

this.successRate != 0
? RollingText(
    leftNum: this.successRate > 9
        ? this.successRate ~/ 10
        : 0,
    rightNum:
        this.successRate.remainder(10),
  )
: Container(),

喜欢的朋友可以点赞支持下，谢谢~