Flutter实现验证码输入框

Flutter实现验证码输入框

思路：使用Stack布局，下层设计出每个框的样式，上层使用一个透明的输入框。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:get/get.dart';

class CodePage extends StatefulWidget {
  final String tel;
  CodePage(this.tel);
  @override
  _CodePageState createState() => _CodePageState();
}

class _CodePageState extends State<CodePage> {
  //重新发送验证码计时器
  Timer _codeTimer;
  //重新发送验证码倒计时
  int _codeTime = 60;
  //是否重新发送验证码
  bool _reSendCode = false;
  //textfield焦点
  FocusNode _codeFocus = new FocusNode();
  //当前输入验证码的位置
  int _currentCount = 0;
  //闪烁光标计时器
  Timer _timer;
  //验证码
  String _code = "";
  //闪烁光标颜色
  Color _cursorColor = Colors.transparent;
  //textfield控制器
  TextEditingController _codeController = new TextEditingController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //进入页面自动获取焦点，弹出键盘
    _codeFocus.requestFocus();
    //闪烁光标
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      _cursorColor = Colors.transparent;
      if (mounted) {
        setState(() {});
      }
      Future.delayed(Duration(milliseconds: 500), () {
        _cursorColor = Colors.blue;
        if (mounted) {
          setState(() {});
        }
      });
    });
  }

  @override
  void dispose() {
    // TODO: implement dispose
    //判断计时器是否活跃，活跃取消
    if (_timer.isActive) {
      _timer.cancel();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        leading: IconButton(
          icon: Icon(
            Icons.arrow_back_ios,
            size: ScreenUtil().setSp(16),
          ),
          onPressed: () {
            Get.back();
          },
        ),
      ),
      body: SingleChildScrollView(
        child: Container(
          color: Colors.white,
          width: Screen