title: GetX state management
body: <p>I started following a flutter course, and in the state management section I decided to learn GetX state management instead.</p>
  <p>Anyway, in this shop tutorial, I'm trying to change the icon status when pressed, but it doesn't.</p>
  <h3>File <em>product_item.dart</em></h3>
  <pre><code>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&lt;Products&gt;(
          builder: (_) =&gt; GridTile(
            child: GestureDetector(
              onTap: () =&gt; 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,
              ),
            )),
        ));
    }
  }
  </code></pre>
  <h3>File <em>product.dart</em></h3>
  <pre><code>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();
    }
  }
  </code></pre>
  <h3>File <em>products.dart</em></h3>
  <pre><code>import 'package:get/get.dart';
  
  import 'product.dart';
  
  class Products extends GetxController {
    List&lt;Product&gt; 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 =&gt; [...items];
  
    Product findById(String id) {
      return items.firstWhere((prod) =&gt; prod.id == id);
    }
  
    void addProduct() {
      //_items.add(value);
      update();
    }
  }
  </code></pre>
  <h3>File <em>products_grid</em></h3>
  <pre><code>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&lt;Products&gt;(
        init: Products(),
        builder: (data) =&gt; GridView.builder(
            padding: const EdgeInsets.all(10.0),
            itemCount: data.items.length,
            itemBuilder: (ctx, index) =&gt; ProductItem(
                  pIndex: data.items[index],
                ),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              childAspectRatio: 3 / 2,
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
            )),
      );
    }
  }
  </code></pre>
  <h3>File <em>product_details</em></h3>
  <pre><code>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&lt;Products&gt;(
              init: Products(),
              builder: (data) =&gt; Text(Get.arguments),
            )),
          ),
        ),
      );
    }
  }
  </code></pre>