Keranjang Belanja: Layar Keranjang

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

Layar kedua menampilkan isi keranjang. Ini adalah ConsumerWidget yang memantau cartProvider yang sama, jadi tidak ada yang perlu diberikan kepadanya: dorong layar ini, lalu layar ini membaca keranjang itu sendiri.

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final cart = ref.watch(cartProvider);
    return Scaffold(
      appBar: AppBar(title: const Text('Your cart')),
      body: ...,
    );
  }
}

Ingat provider yang membungkus home dan tidak bisa ditemukan dari layar yang didorong? Hal itu tidak akan terjadi di sini: ProviderScope membungkus seluruh aplikasi, jadi setiap layar dapat mengakses semua provider.

List kosong di layar terlihat seperti ada yang rusak, jadi tampilkan kalimat sebagai gantinya: cart.isEmpty ? ... : ... memilih di antara keduanya.

Tantangan

Sedang

Buat layar keranjang:

Tambahkan CartScreen ConsumerWidget dengan judul Your cart.
Layar ini menampilkan setiap produk di keranjang sebagai ListTile dengan nama produk dan harganya sebagai trailing.
Jika keranjang kosong, layar ini menampilkan Your cart is empty.
Ikon keranjang di bilah atas toko membuka layar tersebut.

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

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

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

final cartProvider = NotifierProvider<Cart, List<Product>>(Cart.new);

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) {
    final cart = ref.watch(cartProvider);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Shop'),
        actions: [
          IconButton(
            icon: Badge(
              label: Text('${cart.length}'),
              isLabelVisible: cart.isNotEmpty,
              child: const Icon(Icons.shopping_cart),
            ),
            onPressed: () {},
          ),
        ],
      ),
      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: () {
                  ref.read(cartProvider.notifier).add(product);
                },
              ),
            ),
        ],
      ),
    );
  }
}

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