How to implement clear field with flutter_form_builder 3.7.3?

[Yu Shen]

I find flutter_form_builder 3.7.3 https://pub.dev/packages/flutter_form_builder

really helpful to reduce the amount of effort to build a form. 

However, I'm trying to implement clearing a field in the form, for example, when the field is in focus, or with some simple means equivalent, such as long-press gesture, etc.

According to https://stackoverflow.com/questions/54428029/flutter-how-to-clear-text-field-on-focus,

it's possible, as long as I have access to the field's controller. 

class ExampleWidget extends StatefulWidget {
  @override
  _ExampleWidgetState createState() => _ExampleWidgetState();
}

class _ExampleWidgetState extends State<ExampleWidget> {
  FocusNode _focusNode;
  TextEditingController _textFieldController;

  @override
  void initState() {
    _focusNode = FocusNode();
    _focusNode.addListener(() {
      if (_focusNode.hasFocus) _textFieldController.clear();
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) => TextFormField(focusNode: _focusNode, controller: _textFieldController, ...);
}

But the question is how to get access to the controller of a field with flutter_form_builder?

I guess flutter_form_builder might have its own way of achieving the same. 

If you know how to do it, please let me know.

Thanks!

Yu (Aaron)

J'ecrite, donc je pense. 

Je pense, donc je suis.

[Andy Greenshaw]

Not sure I understand the problem…

FormBuilderTextField has a 'TextEditingController controller’ field in the constructor?

Are you creating a custom field?

--
You received this message because you are subscribed to the Google Groups "Flutter Development (flutter-dev)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/CAF5VkCXaejze1LpLf%2BLTuH_U5BFYJ%2BL0kAQQn7w47VH4r68kow%40mail.gmail.com.

[Yu Shen]

Hi Andy,

Thanks for helping!

Maybe, I'm not proficient enough to code in Dart, I just don't know how to express the following properly:

(especially how to access the controller of FormBuilderTypeAhead? Please see the underlined code)

Widget tCTextField(
    {String name, List<String> candidates, String initialValue = 'Pray'}) {
  return FormBuilderTypeAhead(
    initialValue: initialValue,
    decoration: InputDecoration(labelText: name,
        suffixIcon: IconButton(
            icon: Icon(Icons.clear),
            onPressed: () {
              //?.controller.clear();
            })),
    attribute: name,
    // onChanged: _onChanged,
    validators: [FormBuilderValidators.required()],
    itemBuilder: (context, value) {
      return ListTile(
        title: Text(value),
      );
    },
    suggestionsCallback: (query) {
      if (query.length != 0) {
        var lowercaseQuery = query.toLowerCase();
        return candidates.where((value) {
          return value.toLowerCase().contains(lowercaseQuery);
        }).toList(growable: true)
          ..sort((a, b) => a
              .toLowerCase()
              .indexOf(lowercaseQuery)
              .compareTo(b.toLowerCase().indexOf(lowercaseQuery)));
      } else {
        return candidates;
      }
    },
  );
}

Yu (Aaron)

J'ecrite, donc je pense. 

Je pense, donc je suis.

[Andy Greenshaw]

You can just create the controller somewhere up the tree, then use it (and remember to dispose of it). 

So in your case, you could just pass a text controller as an extra parameter to ‘tCTextField’.

eg look here https://gist.github.com/agreensh/fa5346c197bead809967535259f07984

Also, note how I've called ‘_typeAheadController.clear()’; this is necessary due to a bug in the Flutter TextSelection widget.