How to attach a listener to a TextEditingController located inside a state ?

[arthurgustin]

Hi @brianegan
I want to attach a listener to TextEditingController that is created in a factory inside a state and I wonder what is the best way to do it ?

[brianegan]

In this case, you have two options:

1. Wrap your Form Widget in a StoreConnector that converts the store into an onTextChanged callback that dispatches the correct action.
2. Grab the store from the Widget hierarchy using the didChangeDependencies method. Note: This method may be called multiple times so you need to take care!

I generally prefer option #1, but thought I'd quickly write up some code to show the different options so you can decide for yourself which pattern ya like!

class TextChangedAction {
  final String string;

  TextChangedAction(this.string);
}

//
// Option #1: Wrap your Form in a StoreConnector that creates the appropriate
// dispatch function for you
//
class FormPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StoreConnector<int, void Function(String)>(
      converter: (store) =>
          (String text) => store.dispatch(TextChangedAction(text)),
      builder: (context, onTextChanged) => MyForm(onTextChanged: onTextChanged),
    );
  }
}

class MyForm extends StatefulWidget {
  final void Function(String) onTextChanged;

  const MyForm({Key key, this.onTextChanged}) : super(key: key);

  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    _controller.addListener(_onTextChanged);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.removeListener(_onTextChanged);
  }

  void _onTextChanged() {
    widget.onTextChanged(_controller.text);
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
    );
  }
}

//
// Options 2: Grab the Store from the Widget hierarchy using
// `didChangeDependencies`
//
class MyOtherForm extends StatefulWidget {
  @override
  MyOtherFormState createState() => MyOtherFormState();
}

class MyOtherFormState extends State<MyOtherForm> {
  final _controller = TextEditingController();
  VoidCallback _listener;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    if (_listener == null) {
      _listener = () {
        StoreProvider.of<AppState>(context)
            .dispatch(TextChangedAction(_controller.text));
      };
      _controller.addListener(_listener);
    }
  }

  @override
  void dispose() {
    super.dispose();
    _controller.removeListener(_listener);
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

[arthurgustin]

Mmmh, I don't like any of those solutions... I will try number 1 and see if I'm satisfied.
However, I would love to attach the listener inside my state, I don't want to go deep in the tree to do this :/

[brianegan]

Ack, sorry my friend. If ya can find a better solution, please share :)

[kishaningithub]

@arthurgustin Why not use StoreProvider.of(context) inside your listener ?

Example

  TextEditingController _areaTextInputController =
      TextEditingController(text: "1");

  void changeAreaInState() {
    num area = double.tryParse(_areaTextInputController.text) ?? 0;
    Store<AppState> store = StoreProvider.of(context);
    store.dispatch(AreaChangedAction(area));
  }

  @override
  void initState() {
    super.initState();
    _areaTextInputController.addListener(changeAreaInState);
  }

  @override
  void dispose() {
    _areaTextInputController.removeListener(changeAreaInState);
    _areaTextInputController.dispose();
    super.dispose();
  }

[arthurgustin]

My controller is in a state not in a global variable Le mer. 7 nov. 2018 à 02:58, Kishan B <notifications@github.com> a écrit :

…

@arthurgustin <https://github.com/arthurgustin> Why not use StoreProvider.of(context).state inside your listener ? Example TextEditingController _areaTextInputController = TextEditingController(text: "1"); @OverRide void initState() { super.initState(); _areaTextInputController.addListener(changeAreaInState); } @OverRide void dispose() { _areaTextInputController.removeListener(changeAreaInState); _areaTextInputController.dispose(); super.dispose(); } void changeAreaInState() { num area = double.tryParse(_areaTextInputController.text) ?? 0; StoreProvider.of(context).state.dispatch(AreaChangedAction(area)); } — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#80 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AahqbVkWv-PxZJqGeK6niCuZVozz-Y8Fks5usj5agaJpZM4W0jsc> .

[hkirk]

@brianegan Im trying to use the first solution you made above, to save directly to firebase when the users types data. Can't quite addopt this pattern to my use case. I've setup a onInit and onDispose in the StoreConnector

    onInit: (store) => store.dispatch(RequestMonthlyGoalDataEventsAction()),
    onDispose: (store) => store.dispatch(CancelMonthlyGoalDataEventsAction()),
    ...

These works fine, I correct lave data to firebase and remove the middleware when the widget is removed. So that is fine.

Problem comes when I will show the values from Firebase in the TextFields.

class MyForm extends StatefulWidget {
  final void Function(String) onTextChanged;
  final string value;
  
  const MyForm({Key key, this.onTextChanged, this.value}) : super(key: key);
  
  @override
   _MyFormState createState() => _MyFormState();
}

I can show the values when they are available through the local store, but when I get an update from firebase, through the middleware, I cannot update the TextFields in my StatefullWidget. Any ideas?