Управление состоянием GetX

Question

Я начал проходить курс флаттера, в разделе управления состоянием решил вместо этого изучить управление состоянием Getx. в любом случае в этом уроке магазина я пытаюсь изменить статус значка при нажатии, но этого не происходит.

Я новичок в этом, поэтому буду признателен, если вы мне поможете.

product_item.dart

import 'package:flutter/material.dart';
import 'package:getx_pattern/app/ui/android/products_overview/widgets/product_details.dart';
import 'package:get/get.dart';

import '../../../theme/app_theme.dart';
import './product.dart';
import './products.dart';

class ProductItem extends StatelessWidget {
  final pIndex;
  // final String title;
  // final String imageUrl;

  ProductItem({
    this.pIndex,
  });

  productDetails() {
    Get.to(
      ProductDetailScreen(),
      arguments: product.findById(pIndex.id).title,
      transition: Transition.rightToLeft,
    );
  }

  final Products product = Get.put(Products());
  // final Product pp = Get.put(Product(
  //     id: null, title: null, description: null, price: null, imageUrl: null));

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
        borderRadius: BorderRadius.circular(10.0),
        child: GetBuilder<Products>(
          builder: (_) => GridTile(
              child: GestureDetector(
                onTap: () => productDetails(),
                child: Image.network(
                  product.findById(pIndex.id).imageUrl,
                  fit: BoxFit.cover,
                ),
              ),
              footer: GridTileBar(
                backgroundColor: Colors.black87,
                leading: IconButton(
                    icon: Icon(product.findById(pIndex.id).isFavorite
                        ? Icons.favorite
                        : Icons.favorite_border),
                    color: appThemeData.accentColor,
                    onPressed: () {
                      product.findById(pIndex.id).toggleFavoriteStatus();
                      // print(_.items[pIndex].isFavorite);
                    }),
                trailing: IconButton(
                    icon: Icon(Icons.shopping_cart),
                    color: appThemeData.accentColor,
                    onPressed: () {}),
                title: Text(
                  product.findById(pIndex.id).title,
                  textAlign: TextAlign.center,
                ),
              )),
        ));
  }
}

product.dart

import 'package:flutter/foundation.dart';
import 'package:get/get.dart';

class Product extends GetxController {
  final String id;
  final String title;
  final String description;
  final double price;
  final String imageUrl;
  bool isFavorite;

  Product({
    @required this.id,
    @required this.title,
    @required this.description,
    @required this.price,
    @required this.imageUrl,
    this.isFavorite = false,
  });

  void toggleFavoriteStatus() {
    isFavorite = !isFavorite;
    update();
  }
}

product.dart

import 'package:get/get.dart';

import 'product.dart';

class Products extends GetxController {
  List<Product> items = [];

  Products();

  @override
  onInit() {
    items = [
      Product(
        id: 'p1',
        title: 'Red Shirt',
        description: 'A red shirt - it is pretty red!',
        price: 29.99,
        imageUrl:
            'https://cdn.pixabay.com/photo/2016/10/02/22/17/red-t-shirt-1710578_1280.jpg',
      ),
      Product(
        id: 'p2',
        title: 'Trousers',
        description: 'A nice pair of trousers.',
        price: 59.99,
        imageUrl:
            'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Trousers%2C_dress_%28AM_1960.022-8%29.jpg/512px-Trousers%2C_dress_%28AM_1960.022-8%29.jpg',
      ),
    ];
    update();
    super.onInit();
  }

  List get myitems => [...items];

  Product findById(String id) {
    return items.firstWhere((prod) => prod.id == id);
  }

  void addProduct() {
//    _items.add(value);
    update();
  }
}

product_grid

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

import './product.dart';
import './product_item.dart';
import './products.dart';

class ProductsGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<Products>(
      init: Products(),
      builder: (data) => GridView.builder(
          padding: const EdgeInsets.all(10.0),
          itemCount: data.items.length,
          itemBuilder: (ctx, index) => ProductItem(
                pIndex: data.items[index],
              ),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            childAspectRatio: 3 / 2,
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
          )),
    );
  }
}

product_details

import 'package:getx_pattern/app/ui/android/products_overview/widgets/products.dart';

import '../../../theme/app_theme.dart';

class ProductDetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: appThemeData,
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(
              title: GetBuilder<Products>(
            init: Products(),
            builder: (data) => Text(Get.arguments),
          )),
        ),
      ),
    );
  }
}

Answer 1

Я только что решил проблему. путем перемещения метода из product.dart

void toggleFavoriteStatus() {
    isFavorite = !isFavorite;
    update();
  }

в products.dart

void toggleFavoriteStatus(String id) {
    items.firstWhere((prod) => prod.id == id).isFavorite =
        !items.firstWhere((prod) => prod.id == id).isFavorite;
    update();
  }