multi-boxes Textfield in flutter

How can I create Textfeild with multi input boxes, same like in picture with controller

You can create this UI with TextFormFiled with OutlineInputBorder.You can follow this for this question

Also you can use pin_code_fields package for this.

child: PinCodeTextField(
  pinTheme: PinTheme(shape: PinCodeFieldShape.box),
  appContext: context,
  length: 15,
  blinkWhenObscuring: true,
  animationType: AnimationType.fade,
  keyboardType: TextInputType.number,
  onCompleted: (v) {
    debugPrint("Completed");
  },
  onChanged: (value) {
    debugPrint(value);
  },
),

Using this

 int numberOfItem = 15;
  Widget _textFieldOTP(BuildContext context, {required bool first, last}) {
    return Container(
      height: 54,
      width: 53,
      child: TextFormField(
        autofocus: true,
        onChanged: (value) {
          if (value.length == 1 && last == false) {
            FocusScope.of(context).nextFocus();
          }
          if (value.length == 0 && first == false) {
            FocusScope.of(context).previousFocus();
          }
        },
        showCursor: false,
        readOnly: false,
        textAlign: TextAlign.center,
        keyboardType: TextInputType.number,
        maxLength: 1,
        decoration: InputDecoration(
          counterStyle: TextStyle(height: double.minPositive),
          counterText: "",
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(width: 1, color: Color(0x1A484848)),
            borderRadius: BorderRadius.circular(6),
          ),
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(width: 1, color: Color(0xFFFF2957)),
            borderRadius: BorderRadius.circular(6),
          ),
        ),
      ),
    );
  }

And using it like

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: List.generate(numberOfItem, (index) {
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: _textFieldOTP(context,
            first: index == 0, last: index == numberOfItem - 1),
      );
    }),
  ),
),