Flutter Form Builder With Bloc

An in depth session on how to user Flutter Form Builder using the Bloc State management and a bit of Cubit.

Transcript

1. Talk title should be limited to no more than four lines. Firstname Lastname Title, Company [Location]
2. Flutter Form Builder with Bloc
3. Key Terms used - Flutter form builder - This package helps in creation of data collection forms in Flutter by removing the boilerplate needed to build a form, validate fields, react to changes, and collect final user input. - Flutter Bloc - Built to be used with the bloc state management package. - Cubit - Cubit is a lightweight state management solution. It is a subset of the bloc package that does not rely on events and instead uses methods to emit new states.
6. Bloc + Cubit - This shows which data will be held in this FirstStepCubit, which in my case it shows the Personal Loans that I wish users will see what they have typed in Form. - The class is of type Map with a key of String and a dynamic value which shows which type of data it will hold. - The emit method stores the data in cubit (Locally) therefore anytime you type anything in the forms, it will return the last data written in the form
8. How does it store data? - From the above sample codes, I wrapped the whole application with MultiBlocProvider and have my FirstStepCubit inside the providers property. - To access it on the page I created a button, which goes to the next page and still saves the data in the cubit. This will eventually enable my users to view the data on the view page right before they submit their data. It enables the countercheck if they have applied the correct type of Loan.
10. - The above piece of code is written on my Submit and review page. - Since I am using Maps as my datatype with a string Key and dynamic value, this does not limit me from printing different data types. - On that line, FirstStepCubit locates the users data on the form field and stores it, and .state[Company] prints out the value of the data from the users input
12. BlocObserver - I used it during the development of the app to monitor/ confirm that the intended state is being emitted on a real time basis. - I used it is great especially with real time changes.
13. Kendi J