Flutter — Cart Calculator App: Part 2

Hamza Mateen
4 min readJan 9, 2022

Welcome back!
I see you are here for part 2 of the Cart Calculator App on Flutter.

If you have yet to read Part 1, check it out here.

The wireframes for the app were ready. Now let’s dive in and start coding.

Remove the old code for the class _MyHomePageState widget. Change MaterialApp title in MyApp and AppBar widgets to “Cart Calculator”. Replace the body with a single Container widget.

The resulting file will look like this.

Figure 1: main.dart — starting from zero

Looking at the wireframes, I see we need a data model for a Product having an id, name, quantity and price.

Simply create a new file name product_model.dart, write a new class named Product and write its properties and constructor as shown. (Later we will JSON conversion and map conversion capability for persistence storage)

Figure 3: Product data model

Now go back to main.dart file and create a list of Products. Insert a couple of values by default.

--

--

Hamza Mateen

Front-End Development Lead at MiFinity | All about Flutter Application Development & Life in Ireland. Flutter App Developer | Lecturer | Writer.