Flutter — Cart Calculator App: Part 3

FAB and add a new product.

If you have yet to read the previous parts, check them here → Part 1, Part 2

You made it this far, congratulations on being consistent!

Let’s add a floating action button or FAB for short and make it clickable to open a custom dialog as shown in figure 1.
Leave the function empty for now.

Figure 1: Adding a FAB with 32.0 padding from bottom

The resulting screen will look something like in figure 2. Remember that the Floating Action Button is not pasted on top of the total card. You can move it anywhere by tweaking the padding and position.

In the next few steps, we will….

1. Add an Alert Dialog and make it non-dismissible upon outer clicks using
   barrierDismissible: false
2. Edit the title parameter of the dialog to add a Title and cross icon for closing the dialog.
3. Add three Textfields for product name, quantity and price. Also, modify decoration, keyboardType of each along with providing a TextEditingController to each TextField.
4. Add an ElevatedButton widget which will add the product to the list.