Flutter : how to store four textformfield to one controller

Viewed 23

i have four textformfield to create otp page screen , i want to store all of them to one controller code :

class OTP extends StatelessWidget {
  final int itemCount;
  final TextEditingController controller;
  const OTP({Key? key, required this.itemCount, required this.controller}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        for(int i = 0 ; i < itemCount ; i++)
        otp( context),
      ],
    );
  }
  otp(context){
    return SizedBox(
      height: AppSize.s70,
      width: AppSize.s60,
      child: Material(
        borderRadius: BorderRadius.circular(AppSize.s10),
        elevation: AppSize.s4,
        shadowColor: AppColors.grey,
        child: TextFormField(
          controller: controller,
            autofocus: true,
            onChanged: (value){
              if(value.length == 1){FocusScope.of(context).nextFocus();}
              if(value.isEmpty){FocusScope.of(context).previousFocus();}
            },
            showCursor: false,
            readOnly: false,
            style: Theme.of(context).textTheme.headlineLarge!.copyWith(fontSize: AppFontsSizeManager.s20),
            keyboardType: TextInputType.number,
            textAlign: TextAlign.center,
            inputFormatters: [
              LengthLimitingTextInputFormatter(1),
              FilteringTextInputFormatter.digitsOnly
            ],
            decoration: InputDecoration(
                filled: true,
                fillColor: AppColors.white15,
                enabledBorder: Theme.of(context).inputDecorationTheme.enabledBorder,
                focusedBorder: Theme.of(context).inputDecorationTheme.focusedBorder,
                errorBorder: Theme.of(context).inputDecorationTheme.errorBorder,
                focusedErrorBorder:
                Theme.of(context).inputDecorationTheme.focusedErrorBorder,
                contentPadding:
                Theme.of(context).inputDecorationTheme.contentPadding)
        ),
      ),
    );
  }
} 

In addition, I used it as a single widget and I call it more than once

,I use the loop to call it more than once

..

0 Answers
Related