Flutter, Shopping Cart Type Counter App

Photo by Flaunter on Unsplash

We are going to create one simple application which will demonstrate how to implement shopping cart kind of requirements, where generally we need to increment or decrement item quantity in cart. So here we are try to achieve that in simple flutter application.

Main app and Starting point of the app

When we create flutter project we have it in build, we just change the title nothing else, code looks something like blow snapshot.

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(),
      home: MyHomePage(title: 'Shopping Cart'),
    );
  }
}

Now we are going to create row of list, which contain image of item (for demo I have put static one image), control button which are plus and minus for increment and decrement and final have counter in between to show values.

Shopping cart row would something like this

To create shopping cart item we are going to build few methods. Let’s start with main method to create list. We use row to achieve above design.

Widget _shoppingItem(int itemIndex) {
  return Card(
    elevation: 1.0,
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Image.asset("assets/flutter.png", width: 100),
          _decrementButton(itemIndex),
          Text(
            '${numberOfItems[itemIndex]}',
            style: TextStyle(fontSize: 18.0),
          ),
          _incrementButton(itemIndex),
        ],
      ),
    ),
  );
}

Now we create two more method for increment and decrement.

Below is method for increment counter:

Widget _incrementButton(int index) {
  return FloatingActionButton(
    child: Icon(Icons.add, color: Colors.black87),
    backgroundColor: Colors.white,
    onPressed: () {
      setState(() {
        numberOfItems[index]++;
      });
    },
  );
}

Below is method for decrement counter:

Widget _decrementButton(int index) {
  return FloatingActionButton(
      onPressed: () {
        setState(() {
          numberOfItems[index]--;
        });
      },
      child: new Icon(const IconData(0xe15b, fontFamily: 'MaterialIcons'), color: Colors.black),
      backgroundColor: Colors.white);
}

Now its time show core thing of the app, which is non another than initiate state method.

List numberOfItems = List<int>();
//For demonstrate purpose I have added five static items
void addItems() {
  numberOfItems.add(1);
  numberOfItems.add(2);
  numberOfItems.add(3);
  numberOfItems.add(4);
  numberOfItems.add(5);
}
@override
void initState() {
  super.initState();
  addItems();
}

Final result of the application:

Shopping cart demo application