CODEWITHSUNDEEP
flutterflutter-getx
haard
haard

Reputation: 13

Flutter GetX: Navigating to New Product Details Page with Different Product ID Fails to Load New Data

Question

I am developing an e-commerce app using Flutter with GetX for state management. I have a ProductDetailsView that displays product details using a named route and arguments. In the ProductDetailsController, I load product details based on the product ID passed through arguments.

Here is my controller code:

import 'package:e_commerce/api/send_request.dart';
import 'package:e_commerce/app/data/color_collections.dart';
import 'package:e_commerce/app/widgets/theme_mode.dart';
import 'package:get/get.dart';
import 'package:webview_flutter/webview_flutter.dart';

class ProductDetailsController extends GetxController {
  WebViewController? webViewController;
  var webViewHeight = 100.0.obs;
  var productDetailsLoading = true.obs;
  var productDetails = <String, dynamic>{}.obs;
  var productId = 0.obs;

  @override
  void onInit() {
    super.onInit();
    productId.value = Get.arguments['product_id'];
    loadPage();
  }

  @override
  void onClose() {
    super.onClose();
    productId.close();
  }

  void loadPage() async {
    productDetailsLoading.value = true;
    var resp = await SendRequest("/Products/Manager/CRUD/GetProductDetails", data: {
      "product_id": productId.value,
    });

    productDetails.value = resp["product_details"];
    productDetailsLoading.value = false;

    if (webViewController == null) {
      webViewController = WebViewController()
        ..setJavaScriptMode(JavaScriptMode.unrestricted)
        ..setBackgroundColor(isDarkMode()
            ? DynamicColorsCollection.backgroundColorDark
            : DynamicColorsCollection.backgroundColorLight)
        ..setNavigationDelegate(
          NavigationDelegate(
            onProgress: (int progress) {},
            onPageStarted: (String url) {},
            onPageFinished: (String url) async {
              final result = await webViewController?.runJavaScriptReturningResult(
                  "document.documentElement.scrollHeight.toString();");
              String heightStr = result as String;
              double height = double.parse(heightStr.replaceAll('"', ''));
              updateHeight(height);
            },
            onHttpError: (HttpResponseError error) {},
            onWebResourceError: (WebResourceError error) {},
            onNavigationRequest: (NavigationRequest request) {
              if (request.url.startsWith('https://www.youtube.com/')) {
                return NavigationDecision.navigate;
              }
              return NavigationDecision.prevent;
            },
          ),
        )
        ..loadRequest(Uri.parse(
            "http://some-domain.com/products/description/${resp["product_details"]["product_url"]}"));
    } else {
      webViewController?.loadRequest(Uri.parse(
          "http://some-domain.com/products/description/${resp["product_details"]["product_url"]}"));
    }
  }

  void updateHeight(double height) {
    webViewHeight.value = height;
  }
}

Here is the start of my view code:

class ProductDetailsView extends GetView<ProductDetailsController> {
  const ProductDetailsView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    Get.create<ProductDetailsController>(() => ProductDetailsController());
    return Obx(() {
      if (controller.productDetailsLoading.value) {
        return Material(
          color: isDarkMode()
              ? DynamicColorsCollection.backgroundColorSecondaryDark
              : DynamicColorsCollection.backgroundColorSecondaryLight,
          child: LoadingShimmer(),
        );
      }
      return CustomScaffold(
        backgroundColor: isDarkMode()
            ? DynamicColorsCollection.backgroundColorDark
            : DynamicColorsCollection.backgroundColorLight,

The issue arises when I navigate to a new product details page from the current product details page using a button. The button's code is as follows:

Get.toNamed(
  Routes.PRODUCT_DETAILS,
  arguments: {
    "product_id": id,
  },
  preventDuplicates: false,
);

When I navigate like this, the new product details page does not load the new product data. Instead, it shows the data of the previous product.

How can I ensure that navigating to a new product details page with a different product ID loads the new product's data correctly?

I tried navigating to the new product details page from the current product details page by using the Get.toNamed method with the new product ID as an argument. I expected the new product details page to load and display the details of the new product corresponding to the new product ID. However, instead of loading the new product's data, the page continued to display the data of the previously viewed product. I expected the ProductDetailsController to fetch and show the details of the new product based on the updated product ID passed in the arguments, but this did not happen.

Upvotes: 1

Views: 68

Answers (1)

Kishan Kacha
Kishan Kacha

Reputation: 1

Try This Getx Controller:

var data = Get.arguments;

@override
void onInit() {
 productId.value = data["product_id"].toString();
 super.onInit();
 loadPage();
}

Upvotes: 0

Related Questions