How to pass Function to a reusable Text Input widget in flutter?

Question

I just refactor my code and make all my input widget as a separate widget as follows: import 'package:flutter/material.dart';

class textInput extends StatelessWidget {
  const textInput({
    Key? key,
    required this.label,
    required this.inputController,
    required this.inputIcon,
    this.helperText,
    this.suffixHelpText,
  }) : super(key: key);

  final String label;
  final TextEditingController inputController;
  final Icon inputIcon;
  final Widget? suffixHelpText;
  final String? helperText;

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: inputController,
      decoration: InputDecoration(
        labelText: label,
        helperText: helperText != null ? helperText : '',
        icon: inputIcon,
        suffixIcon: suffixHelpText,
      ),
    );
  }
}

Now I want to pass OnChnaged event to this widget which can be optional. I am trying as follows:

import 'package:flutter/material.dart';

class textInput extends StatelessWidget {
  const textInput({
    Key? key,
    required this.label,
    required this.inputController,
    required this.inputIcon,
    this.helperText,
    this.suffixHelpText,
    this.onChangeEvent,
  }) : super(key: key);

  final String label;
  final TextEditingController inputController;
  final Icon inputIcon;
  final Widget? suffixHelpText;
  final String? helperText;
  final Function? onChangeEvent;
  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: inputController,
      onChanged: onChangeEvent !=null? onChangeEvent:(){},
      decoration: InputDecoration(
        labelText: label,
        helperText: helperText != null ? helperText : '',
        icon: inputIcon,
        suffixIcon: suffixHelpText,
      ),
    );
  }
}

But getting error with this onChanged: onChangeEvent !=null? onChangeEvent:(){}, onChanged: onChangeEvent !=null? onChangeEvent:(){}, line. Am I trying something which is not possible in deed? Or Is there any good approach? I love to clean my code in entire project. Please help.

Answer 1

The Function expected in onChanged is void Function(String)? onChanged void Function(String)? onChanged

Just change

final Function? onChangeEvent

as below:

final Function(String?)? onChangeEvent;

and just pass the onChangeEvent as below:

onChanged: onChangeEvent

Answer 2

onChanged: onChangeEvent != null ? (_) => onChangeEvent!() : null, 

works for me. Hope this will help other. Here is the full code:

import 'package:flutter/material.dart';

class textInput extends StatelessWidget {
  const textInput({
    Key? key,
    required this.label,
    required this.inputController,
    required this.inputIcon,
    this.helperText,
    this.suffixHelpText,
    this.onChangeEvent,
  }) : super(key: key);

  final String label;
  final TextEditingController inputController;
  final Icon inputIcon;
  final Widget? suffixHelpText;
  final String? helperText;
  final Function? onChangeEvent;
  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: inputController,
      onChanged: onChangeEvent != null ? (_) => onChangeEvent!() : null,
      decoration: InputDecoration(
        labelText: label,
        helperText: helperText != null ? helperText : '',
        icon: inputIcon,
        suffixIcon: suffixHelpText,
      ),
    );
  }
}