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
..