flutter倒计时控件

效果图

使用方式1 默认为倒计时

CountdownWidget(
  5,            ///倒计时的时间
  onClick: () { ///  点击事件的回调
    _skip2main();
  },
  onFinish: () { ///倒计时完成的回调
    _skip2main();
  },
)

使用方式2修改圆角和文案

CountdownWidget(
  total: 10,
  content: "已发送",
  textColor: Colors.blue,
  borderRadius: 2,
  onClick: () {
    _skip2main();
  },
  onFinish: () {
    _skip2main();
  },
)

倒计时实现

import 'dart:async';

import 'package:bilibili_flutter/common/base/base_state.dart';
import 'package:bilibili_flutter/common/base/base_widget.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';

///用于splash界面中倒计时按钮

class CountdownWidget extends BiliWidget {
  ///构造中传入函数
  final VoidCallback? onClick;

  final VoidCallback? onFinish;
  final int total;
  final double borderRadius;
  final String content;
  final double? height;

  final Color? focusColor;
  final Color? hoverColor;
  final Color? highlightColor;

  CountdownWidget(
      {this.total = 5,
      Key? key,
      this.height = 40,
      this.onClick,
      this.onFinish,
      this.borderRadius = 20,
      this.content = "倒计时",
      this.focusColor,
      this.hoverColor,
      this.highlightColor})
      : super(key: key);

  @override
  State<CountdownWidget> createState() => _CountdownWidgetState();
}

class _CountdownWidgetState extends BiliState<CountdownWidget> {
  var _count = 0;

  late Timer _timer;

  ///注册倒计时
  @override
  void initState() {
    super.initState();
    var duration = const Duration(seconds: 1);
    _timer = Timer.periodic(duration, (timer) {
      if (_count < widget.total) {
        setState(() {
          _count++;
        });
      } else {
        widget.onFinish?.call();
        _timer.cancel();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      focusColor: widget.focusColor,
      hoverColor: widget.hoverColor,
      highlightColor: widget.highlightColor,
      onTap: () {
        widget.onClick?.call();
      },
      child: SizedBox(
        height: widget.height,
        child: Card(
          elevation: 1,
          shape: RoundedRectangleBorder(
            borderRadius:
                BorderRadius.all(Radius.circular(widget.borderRadius)),
          ),
          child: Center(
            child: Padding(
              padding: const EdgeInsets.only(left: 10, right: 10),
              child: Text("${widget.content}${widget.total - _count}s"),
            ),
          ),
        ),
      ),
    );
  }
}

依赖的两个基类

import 'package:flutter/material.dart';

@immutable
abstract class BiliWidget extends StatefulWidget {
  BiliWidget({
    Key? key,
  }) : super(key: key);

  String param = "";

  void setParam(String param) {
    this.param = param;
  }
}

import 'package:flutter/material.dart';

import 'base_state.dart';

abstract class BiliState<T extends BiliWidget> extends State<T> {}

项目源码

github.com/HaiYangCode…