Slide 1

Slide 1 text

Talk title should be limited to no more than four lines. Firstname Lastname Title, Company [Location]

Slide 2

Slide 2 text

Flutter Form Builder with Bloc

Slide 3

Slide 3 text

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.

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

- 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

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

Kendi J