I try to pass a TextEditingController from a parent Class to a child Class. I don't know, how to do so.

This is my class, where I want to use the TextEditingController which I want to give as an argument.

class AutocompleteField extends StatelessWidget {
  const AutocompleteField({Key? key}) : super(key: key);

  static const List<String> _kOptions = <String>[
    'Superdry',
    'A&F',
    'H&M',
  ];

  Widget build(BuildContext context) {
    return Autocomplete<String>(
      optionsBuilder: (TextEditingValue textEditingValue) {
        if (textEditingValue.text == '') {
          return const Iterable<String>.empty();
        }
        return _kOptions.where((String option) {
          return option.contains(textEditingValue.text.toLowerCase());
        });
      },
      fieldViewBuilder: (BuildContext context,
          TextEditingController textEditingController,
          FocusNode focusNode,
          VoidCallback onFieldSubmitted) {
        return TextFormField(
            controller: textEditingController,
            focusNode: focusNode,
            onFieldSubmitted: (str) => onFieldSubmitted(),
            decoration: const InputDecoration(
              border: UnderlineInputBorder(),
              contentPadding: EdgeInsets.only(left: 12.0),
            ));
      },
      onSelected: (String selection) {
        debugPrint('You just selected $selection');
      },
    );
  }
}

I call it in the parent class like this.

  Padding(
              padding: const EdgeInsets.only(left: 12.0, top: 12.0),
              child: Text(
                "Marke",
                style: TextStyle(
                  color: Colors.grey[800],
                ),
              )),
          AutocompleteField(labelTextController),

The labelTextController is a TextEditingController which I defined in the parent class and want to call in the class of the AutoComplete widget, to update the state. Do you have any suggestions?

Thank you very much!

CodePudding user response：

You have to declare Text editing Controller in AutocompleteField class like below

class AutocompleteField extends StatelessWidget {
  final TextEditingController labelTextController;

  const AutocompleteField({required this.labelTextController, Key? key})
      : super(key: key);

  static const List<String> _kOptions = <String>[
    'Superdry',
    'A&F',
    'H&M',
  ];

  Widget build(BuildContext context) {
    return Autocomplete<String>(
      optionsBuilder: (TextEditingValue textEditingValue) {
        if (textEditingValue.text == '') {
          return const Iterable<String>.empty();
        }
        return _kOptions.where((String option) {
          return option.contains(textEditingValue.text.toLowerCase());
        });
      },
      fieldViewBuilder: (BuildContext context,
          TextEditingController textEditingController,
          FocusNode focusNode,
          VoidCallback onFieldSubmitted) {
        return TextFormField(
            controller: textEditingController,
            focusNode: focusNode,
            onFieldSubmitted: (str) => onFieldSubmitted(),
            decoration: const InputDecoration(
              border: UnderlineInputBorder(),
              contentPadding: EdgeInsets.only(left: 12.0),
            ));
      },
      onSelected: (String selection) {
        debugPrint('You just selected $selection');
      },
    );
  }
}

and You can pass your controller as shown below

AutocompleteField(
  labelTextController: labelTextController,
);

CodePudding user response：

you have to pass your controller from parent to child class follow this step:-

first of all add one parameter like this into child class

        class `AutocompleteField` extends StatelessWidget {
  final TextEditingController labelTextController;

  const AutocompleteField({required this.labelTextController, Key? key})
      : super(key: key);

  static const List<String> _kOptions = <String>[
    'Superdry',
    'A&F',
    'H&M',
  ];

  Widget build(BuildContext context) {
    return Autocomplete<String>(
      optionsBuilder: (TextEditingValue textEditingValue) {
        if (textEditingValue.text == '') {
          return const Iterable<String>.empty();
        }
        return _kOptions.where((String option) {
          return option.contains(textEditingValue.text.toLowerCase());
        });
      },
      fieldViewBuilder: (BuildContext context,
          TextEditingController textEditingController,
          FocusNode focusNode,
          VoidCallback onFieldSubmitted) {
        return TextFormField(
            controller: textEditingController,
            focusNode: focusNode,
            onFieldSubmitted: (str) => onFieldSubmitted(),
            decoration: const InputDecoration(
              border: UnderlineInputBorder(),
              contentPadding: EdgeInsets.only(left: 12.0),
            ));
      },
      onSelected: (String selection) {
        debugPrint('You just selected $selection');
      },
    );
  }
}

and then pass controller when you call it.

    AutocompleteField(controllername);

CodePudding user response：

Your AutocompleteField should look something like this

class AutoCompleteField extends StatefulWidget {
  const AutoCompleteField({Key? key, required this.textEditingController}) : super(key: key);
  final TextEditingController textEditingController; // declare a variable as parameter for the class
  @override
  State<AutoCompleteField> createState() => _AutoCompleteFieldState();
}

class _AutoCompleteFieldState extends State<AutoCompleteField> {
  @override
  Widget build(BuildContext context) {
    // access like this
    print(widget.textEditingController);
    return Container();
  }
}

Incase of stateless widget

class AutocompleteFiled extends StatelessWidget {
  const AutocompleteFiled({Key? key, required this.textEditingController}) : super(key: key);
  final TextEditingController textEditingController;
  
  @override
  Widget build(BuildContext context) {
    print(textEditingController);
    return Container();
  }
}

And in Parent Class call like this

Column(
        children: [
          Padding(
              padding: const EdgeInsets.only(left: 12.0, top: 12.0),
              child: Text(
                "Marke",
                style: TextStyle(
                  color: Colors.grey[800],
                ),
              )),
          AutocompleteField(textEditingController: labelTextController,)
        ],
      )