TextInputType in a customized TextFormField in flutter not working

Question

I like to create a customized TextFormField widget as follows:

class CustomTextFormField extends StatelessWidget {
  final double height;
  final TextEditingController controller;
  final TextAlign? textAlign;
  final TextStyle? style;
  final TextInputType? keyboardType;
  const CustomTextFormField({
    super.key,
    required this.height,
    required this.controller,
    required this.validatorStatus,
    this.textAlign,
    this.style,
    this.keyboardType,
  });

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: controller,
      validator: !validatorStatus
          ? null
          : (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
      decoration: const InputDecoration(
        contentPadding: EdgeInsets.all(0),
        constraints:
            BoxConstraints(maxHeight: 40, maxWidth: 200, minWidth: 100),
        border: OutlineInputBorder(
          borderSide: BorderSide(
            width: 1,
          ),
          borderRadius: BorderRadius.all(
            Radius.circular(10),
          ),
        ),
      ),
      textAlign: TextAlign.center,
      style: const TextStyle(
        fontSize: 14,
      ),
      // keyboardType: TextInputType.number,
    );
  }
}

This customized widget is used in the below widget:

class Test extends StatefulWidget {
  const Test({super.key});

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> {
  final _formKey = GlobalKey<FormState>();
  final TextEditingController _nameController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Wrap(
        children: [
          CustomTextFormField(
            height: 50,
            controller: _nameController,
            validatorStatus: true,
            textAlign: TextAlign.center,
            keyboardType: TextInputType.number
          ),
          Row(
            children: [
              ElevatedButton.icon(
                icon: const Icon(Icons.add, color: Colors.white),
                label: const Text(
                  'Add',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(
                    Colors.green[900],
                  ),
                ),
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(content: Text('Processing Data')),
                    );
                  }
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

if keyboardType is included in the customized widget, then the number keyboard appears for TextInputType.number when the CustomTextFormField of the Test widget is clicked. However, the number keyboard is not shown but instead is textual keyboard if the keyboardType property is used directly in the Test widget.

Your suggestions would really be appreciated.

Answer 1

In your CustomTextFormField you did not use the property keyboardType in TextFormField

TextFormField(
  controller: controller,
  keyboardType: keyboardType
///your rest of the code
)