Flutter — Cart Calculator App: Part 2

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.

List<Product> productsList = [
Product(0, "Milk", 1, 1.5),
Product(1, "Biscuits", 2, 2)
];

Create a ListView.builder() and set the itemCount to productsList.length

Each item of ListView would be Row with three Text widgets spaced evenly.

Figure 4: ListView builder added

Let’s run the app and check what it looks like.

The result is not desirable so far but at least there are no errors ;)

Let’s position everything and add column names.

Wrapping each element of row item in an Expanded widget will allow each item to take up equal space so we wrap the three text widgets in Expanded.
Use the style parameter of the Text widget…