H5_Flutter/lib/view/component/code.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:link/constants.dart';

import '../../utils/size_fit.dart';

class Code extends StatefulWidget {
  int type; //1 invite code 2 phone code
  var changed;
  String? _code;
  Code({Key? key, required this.type, required this.changed, String? code})
      : super(key: key) {
    if (code != null) {
      _code = code;
    }
  }

  @override
  State<Code> createState() => _CodeState();
}

class _CodeState extends State<Code> {
  String strCode = '';
  FocusNode focusNode = FocusNode();
  TextEditingController controller = TextEditingController();

  @override
  void initState() {
    // TODO: implement initState
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      focusNode.requestFocus();
    });
    if (widget._code != null) {
      strCode = widget._code!;
      controller.text = strCode;
    }
    super.initState();
  }

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

  Widget item(String code) {
    return GestureDetector(
      onTap: () {
        FocusScope.of(context).requestFocus(focusNode);
      },
      child: Container(
        width: 54.px,
        height: 76.px,
        alignment: Alignment.center,
        decoration: BoxDecoration(
            color: const Color(0xFF2C2C2E),
            borderRadius: BorderRadius.all(Radius.circular(16.px))),
        child: Text(
          code,
          style: TextStyle(
              color: kThemeColor,
              fontSize: 40.px,
              fontFamily: 'Link1',
              fontWeight: FontWeight.w600),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    SizeFit.initialize(context);
    return Stack(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            item(strCode.isNotEmpty
                ? strCode.substring(0, 1).toUpperCase()
                : ''),
            SizedBox(
              width: 24.px,
            ),
            item(strCode.length > 1
                ? strCode.substring(1, 2).toUpperCase()
                : ''),
            SizedBox(
              width: 24.px,
            ),
            item(strCode.length > 2
                ? strCode.substring(2, 3).toUpperCase()
                : ''),
            SizedBox(
              width: 24.px,
            ),
            item(
                strCode.length > 3 ? strCode.substring(3, 4).toUpperCase() : '')
          ],
        ),
        Opacity(
          opacity: 0,
          child: TextField(
            focusNode: focusNode,
            controller: controller,
            autofocus: true,
            maxLength: 4,
            keyboardType:
                widget.type == 1 ? TextInputType.text : TextInputType.number,
            onEditingComplete: () {
              FocusScope.of(context).requestFocus(focusNode);
            },
            onChanged: (value) {
              setState(() {
                strCode = value;
                widget.changed(value);
              });
            },
            // keyboardType: TextInputType.number,
            inputFormatters: [
              FilteringTextInputFormatter(RegExp("[a-z0-9A-Z]"), allow: true),
            ],
          ),
        )
      ],
    );
  }
}