multi-boxes Textfield in flutter

Question

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

Answer 1

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),
      );
    }),
  ),
),