How to change API link keeping the same controller and UI using GetX


I have a controller where I am fetching the data from API and adding in the list


import 'package:get/state_manager.dart';
import 'package:get_it_test/services/product_services.dart';

class ProductController extends GetxController {
  var ProductList = [].obs;

  void onInit() {
    // TODO: implement onInit

  void fetchProduct() async {
    var productsList = await ProductServices.fetchProducts(); 
    //ProductServices is a Separate class from where I am fetching the API
    if (productsList != null) {

I am fetching the data from product_services.dart


import 'package:get_it_test/Models/product_model.dart';
import 'package:http/http.dart' as http;

class ProductServices {
  static var client = http.Client();

  static Future fetchProducts() async {
    var response = await
        Uri.https('********.com', 'api/getProduct'),
        //Here I want to change the number (4) to any other number to fetch different data
    if (response.statusCode == 200) {
      var jsonString = response.body;
      return productsScreenFromJson(jsonString);
    } else {
      //show error message
      return null;

I want to fetch different data by changing that number from the UI by clicking another button from the UI screen.

I want to keep the Controller and UI Screen same, I only want to change the number in the API url based on the button click.


import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get_it_test/Views/Widgets/BottomBar.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:get_it_test/Controller/product_controller.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class ProductScreen extends StatelessWidget {
  final String title;


  final ProductController productController = Get.put(ProductController());
  //I tried creating a constructor in the Controller and passing the data from here to the controller
  //But I can only able to pass the hard code data through this as it is giving warning that 
  //access members can't be accessed through the initialiser
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        iconTheme: IconThemeData(color:,
        backgroundColor: Colors.white,
        title: Text(
          style: TextStyle(color:,
      body: SafeArea(
        child: Column(
          children: [
              child: Obx(() => StaggeredGridView.countBuilder(
                    crossAxisCount: 2,
                    itemCount: productController.ProductList.length,
                    itemBuilder: (BuildContext context, int index) =>
                        new Container(
                            // height: 200,
                            width: 200,
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Column(
                                children: [
                                    imageUrl: productController
                                    placeholder: (context, url) =>
                                        new CircularProgressIndicator(),
                                    errorWidget: (context, url, error) => new Image
                                  //     .ProductList[index].image),
                    staggeredTileBuilder: (int index) =>
                    mainAxisSpacing: 4.0,
                    crossAxisSpacing: 4.0,

I tried creating a constructor in the Controller and passing the data from ProductScreen.dart page to the controller
But I can only able to pass the hard code data from here as it is giving warning that

instance members variable can’t be accessed through the initialiser

I hope you guys got my problem, I want the UI screen to be same and controller too. I only want to change the API link, which is fetching data from Product_Service.dart file and passing that data to the Controller inside the List.


Thanks for the answer @M.M.Hasibuzzaman, I Solved my problem by initializing
final ProductController productController = Get.put(ProductController());
in the homepage.dart file.

I passed Get.find<ProductController>().fetchProduct(3); on onTap function of the homepage so that it will pass the argument.

also added final ProductController productController = Get.find<ProductController>(); in the ProductScreen.dart file so that i can use the same instance variable in the homepage. and it solved my problem.

Answered By – Aryan Yadav

Answer Checked By – Marie Seifert (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.