Keranjang Belanja: Lencana

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

Toko menampilkan keranjang sebagai ikon dengan angka kecil di atasnya, yaitu badge. Flutter memiliki widget untuk itu: Badge menggambar label-nya di dalam gelembung merah pada sudut child-nya:

IconButton(
  icon: Badge(
    label: Text('${cart.length}'),
    isLabelVisible: cart.isNotEmpty,
    child: const Icon(Icons.shopping_cart),
  ),
  onPressed: () {},
)

isLabelVisible menyembunyikan gelembung saat nilainya false. Keranjang kosong menampilkan ikon polos, yang lebih tenang daripada 0. cart.isNotEmpty bernilai true saat list memiliki setidaknya satu item.

Badge mengamati cartProvider yang sama dengan yang digunakan judul. Widget apa pun bisa melakukannya, di mana pun widget itu berada.

Tantangan

Mudah

Pindahkan jumlah dari judul ke badge:

Ubah kembali judul menjadi Shop.
Tambahkan IconButton keranjang ke actions pada bilah atas, dengan Icons.shopping_cart di dalam Badge yang menampilkan jumlah produk.
Sembunyikan angka pada badge saat keranjang kosong.

Tombol ini belum melakukan apa pun; layar keranjang akan dibuat berikutnya.

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: Text('Shop (${cart.length})')),
      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