Keranjang Belanja: Tambahkan ke Keranjang

Termasuk bagian Pengelolaan State dalam perjalanan Flutter di Coddy. Pelajaran 22 dari 27.

Saatnya membuat aplikasi dengan state bersama yang sesungguhnya: sebuah toko kecil. Dalam pelajaran-pelajaran berikutnya, aplikasi ini akan memiliki daftar produk dengan tombol tambah, lencana pada ikon keranjang, layar keranjang dengan total harga, cara untuk menghapus item, dan proses checkout. Dua layar, satu keranjang.

Keranjang adalah state bersama, jadi keranjang menggunakan Notifier. State-nya adalah daftar produk di keranjang, dan awalnya kosong. Setiap perubahan menetapkan daftar baru, seperti yang sudah kamu pelajari:

class Cart extends Notifier<List<Product>> {
  @override
  List<Product> build() => [];

  void add(Product product) {
    state = [...state, product];
  }
}

Daftar produk itu sendiri tidak pernah berubah, jadi daftar tersebut tetap berupa daftar const biasa di bagian atas file. Hanya hal yang berubah yang memerlukan provider.

Tantangan

Sedang

Buat tombol tambah mengisi cart:

Tulis notifier Cart yang state-nya berupa List<Product>, kosong saat mulai, dengan method add(Product product).
Tambahkan final cartProvider = NotifierProvider<Cart, List<Product>>(Cart.new);
Tombol di setiap baris menambahkan produknya.
Bilah atas menampilkan jumlah produk di cart: Shop (0), Shop (1)...

Coba sendiri

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class Product {
  const Product(this.name, this.price);

  final String name;
  final double price;
}

const products = [
  Product('Apple', 0.5),
  Product('Bread', 2.25),
  Product('Cheese', 4),
  Product('Milk', 1.2),
];

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ShopPage(),
    );
  }
}

class ShopPage extends ConsumerWidget {
  const ShopPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(title: const Text('Shop')),
      body: ListView(
        children: [
          for (final product in products)
            ListTile(
              title: Text(product.name),
              subtitle: Text('\$${product.price.toStringAsFixed(2)}'),
              trailing: IconButton(
                icon: const Icon(Icons.add_shopping_cart),
                onPressed: () {},
              ),
            ),
        ],
      ),
    );
  }
}

Uji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Pengelolaan State

Latihan sendiri: Compiler Flutter online