Building a Simple Shopping Cart App with Flutter, SQFlite, and SharedPreferences

Building a Simple Shopping Cart Application

In today’s digital age, consumers expect convenience at their fingertips. Businesses must provide services that cater to this demand, and one way to do so is by creating a shopping cart application. In this article, we will explore how to build a simple shopping cart using Flutter, SQFlite, and SharedPreferences.

What We’re Building

Our application will have two screens: a product list screen and a cart screen. The product list screen will display a list of fruits, along with their names, prices, and images. Each item will have an “Add to Cart” button that allows users to add the item to their shopping cart. The cart screen will display a list of items added to the cart, along with their quantities and total prices.

Setting Up the Project

To start, we need to add the necessary dependencies to our pubspec.yaml file:
yaml
dependencies:
flutter:
sdk: flutter
sqflite: ^1.3.2
shared_preferences: ^0.5.10

Next, we create our model classes for the cart and items:
“`dart
class Cart {
int id;
List items;

Cart({this.id, this.items});
}

class Item {
int id;
String name;
double price;

Item({this.id, this.name, this.price});
}
“`
Adding SQFlite

We use SQFlite to store data locally on the device. First, we create a database helper class:
“`dart
class DBHelper {
static Database _database;

Future get database async {
if (_database != null) return _database;
_database = await openDatabase(
path.join(await getDatabasesPath(), ‘cart.db’),
version: 1,
onCreate: (db, version) {
db.execute(”’
CREATE TABLE cart(
id INTEGER PRIMARY KEY,
items TEXT
);
”’);
},
);
return _database;
}
}
“`
Adding SharedPreferences

We use SharedPreferences to store simple data, such as the item count and total price:
“`dart
class CartProvider with ChangeNotifier {
int _itemCount = 0;
double _totalPrice = 0.0;

int get itemCount => _itemCount;
double get totalPrice => _totalPrice;

void updateItemCount(int count) {
_itemCount = count;
notifyListeners();
}

void updateTotalPrice(double price) {
_totalPrice = price;
notifyListeners();
}
}
“`
Building the UI

Now that we have our data models and storage set up, we can build our UI. First, we create a list of products:
dart
List<Item> products = [
Item(id: 1, name: 'Apple', price: 1.99),
Item(id: 2, name: 'Banana', price: 0.99),
// ...
];

Next, we create our product list screen:
dart
class ProductListScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Product List'),
),
body: ListView.builder(
itemCount: products.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(products[index].name),
subtitle: Text('\$${products[index].price}'),
trailing: IconButton(
icon: Icon(Icons.add_shopping_cart),
onPressed: () {
// Add to cart logic here
},
),
);
},
),
);
}
}

Finally, we create our cart screen:
dart
class CartScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Cart'),
),
body: ListView.builder(
itemCount: cart.items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(cart.items[index].name),
subtitle: Text('\$${cart.items[index].price} x ${cart.items[index].quantity}'),
trailing: IconButton(
icon: Icon(Icons.remove_shopping_cart),
onPressed: () {
// Remove from cart logic here
},
),
);
},
),
bottomNavigationBar: BottomAppBar(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Total: \$${cart.totalPrice}'),
IconButton(
icon: Icon(Icons.payment),
onPressed: () {
// Payment logic here
},
),
],
),
),
);
}
}

This is a basic implementation of a shopping cart application using Flutter, SQFlite, and SharedPreferences. Of course, there are many ways to improve and expand this application, but hopefully, this gives you a good starting point.