felangel / bloc

A predictable state management library that helps implement the BLoC design pattern
https://bloclibrary.dev
MIT License
11.72k stars 3.38k forks source link

docs: Question related to complex forms #2691

Closed SApolinario closed 3 years ago

SApolinario commented 3 years ago

Description

Clearly describe what documentation you are looking to add or improve.

Hi I have a form/screen representing the adding/updating of a Calendar Event. The only input I have is the name text field. The other data is display only with the option to tap and edit in separate screens (e.g. guests, notes, calendar, etc). I have a domain object "Event" that contains various properties and nested objects, lists, etc.

For this type of form do you still feel flutter_bloc would be beneficial to use? if so would you replicate all the Event properties in the state object or try and re-use the existing domain model as part of the state? Is it best to keep the state separate from the domain model and map the data on submission? Any tips or pointers you could give would be welcome.

Thanks

Samuel

marcossevilla commented 3 years ago

Hi @SApolinario, I think you should take a look at formz to have a custom form input with your desired validation on your event object, or just handling it as a property of an immutable state for the form, just like this example.

Most of the time, you'll likely have a form with multiple screens, so splitting those screens into smaller blocs/cubits that update the state of a parent bloc should work well for you. Here's an example with bloc + flow_builder + formz that I'm putting together (sorry, it's still in a dev branch) and can be helpful for what you need, especially the signup feature.

Let me know if that helps. 👍

Gene-Dana commented 3 years ago

@SApolinario For the sake of testing, maintenance, and all-around faster development speed, I would still highly suggest you collect form data and send it through the domain layer.

Although this example is far from perfect, it shows how I collect form data, convert it into a model, and then push it through a bloc -> repo -> firestore backend

https://github.com/Team-Crushing-It/wine_game_admin/blob/a84527fdb8f3ee65922cfcfd223d1e318a10e583/lib/home/_features/details/view/details_view.dart#L62-L124

Feel free to study this more. Here is the live example itself: https://firestore-bloc-crud-demo.netlify.app/#/

felangel commented 3 years ago

@SApolinario closing for now since @marcossevilla and @Gene-Dana have provided several examples of potential ways to implement complex forms with the bloc library. Feel free to comment if you have any follow-up questions or join the bloc discord to chat with more community members, thanks!