Building a Simple Shopping Cart Application

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:

dependencies:
  flutter:
    sdk: flutter
  sqflite: ^1.3.2
  shared_preferences: ^0.5.10

Next, we create our model classes for the cart and items:

class Cart {
  int id;
  List<Item> 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:

class DBHelper {
  static Database _database;

  Future<Database> 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:

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:

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:

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:

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
              },
            ),
          ],
        ),
      ),
    );
  }
}