話不多說先上效果圖

數(shù)字滾動效果.gif

實現(xiàn)原理分析

• 數(shù)據(jù)源頭：0-10數(shù)字煎殷，最后一個為你想要的數(shù)字
• 在外層包裹一個Container,里面為SingleChildView
• 兩列睡雇，SingleChildView設(shè)置controller和滾動效果：curve以及時長
• 滾動到底部即可

源碼如下：

/// 數(shù)字滾動效果
///
/// 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<RollingText> {
  List<int> leftData = [];
  List<int> 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: <Widget>[
          //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(),

喜歡的朋友可以點贊支持下，謝謝~