Flutter BLoC library: Where to keep the TextEditingController object: in State, in BLoC / Cubit class or in the widget?

Question

While using BLoC library we store all the variables in a state class. But where to store TextEditingController, which does not change, but the value of it does?

Let's say I have a state class like this (Just as example):

@freezed
abstract class EditItemState with _$EditItemState {
  const factory EditItemState.updated({
    TextEditingController titleController,
    ShoppingItem shoppingItem,
  }) = _ShoppingListLoaded;
}

And the Cubit class:

class EditItemCubit extends Cubit<EditItemState> {
  EditItemCubit() : super(EditItemState.updated());

  Future<void> titleUpdated() async {
    emit(
      EditItemState.updated().copyWith(
        shoppingItem: state.shoppingItem.copyWith(
          title: state.titleController.text,
        ),
      ),
    );
  }
}

So the Cubit class logic looks messy. I suggest to keep such controllers directly in the widget or in BLoC/Cubit class. Is it a correct approach?

Inlet

Answer 1

Here guys asked the same question from the library authors and the answer of Felix Angelov (author of flutter_bloc) is:

I would highly recommend against maintaining TextEditingController as part of the bloc. Blocs should ideally be platform-agnostic and have no dependency on Flutter. If you need to use TextEditingControllers I would recommend creating a StatefulWidget and maintaining them as part of the State class. Then you can interface with the control in response to state changes via BlocListener

Arbitress

Answer 2

Personally, I have kept mine within my Cubit class. The reason for that is because I am more than likely going to be using the result of that controller at some point. To keep things clean I reference the controller's text within the Cubit rather than pass the text through an event.

Another reason is because you are able to subscribe to events, like addListener, of the controller within the Cubit, which would be considered "Business Logic".

Grapeshot

That's sounds reasonable, thanks for the answer! – Inlet

You're welcome! If this answer has helped you, don't forget to accept it 😉 – Grapeshot

yeah but you can use the onChanged function to call events to your bloc, and listen for state changes in the blocListener property of a BlocConsumer. – Debora

Answer 3

I would advice agains using TextEditingControllers in blocs or cubits, because for me it's a UI level which shouldn't be passed to the logic above.

The problem with either Animation or Text controllers goes away if you use hooks. The code inside of a HookWidget looks like this:

final titleTextController = useTextEditingController(text: book?.title ?? '');

I can add listeners to it and call some methods on change or just get current text and don't care about disposal, as it's happening automatically.

Other hooks include useContext() or useState(). More on hooks in my Flutter cubits + hooks tutorial.

Flycatcher

Answer 4

I think keeping it inside Bloc Cubit would be a great option because lets say you have separated Widgets in a page with sections i.e. General Sections, intro sections, in a form. Imagine passing TextEditingController to all the child widget from the parent Widgets. Just keep inside cubit or bloc, wrap the parents widget with blocbuilder and read from anywhere.

Reginiaregiomontanus