Error fetching data by GetX. Error on model define or else

Question

I need to fetch Category Data from my custom made API. I create a model, controller for fetch data from API with help of getx, but it give me error. I don't know what is the problem. Can anybody help me out please?

Here is my Category_slider.dart file as a view

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/src/widgets/placeholder.dart';
import 'package:get/get.dart';
import 'package:we_serve/controllers/CategoryController.dart';

import '../models/Category.dart';

class CategorySlider extends StatelessWidget {
  CategoryController categoryController = Get.put(CategoryController());
  
  // categoryController.
  @override
  Widget build(BuildContext context) {
    print(categoryController);
    return ListView.builder(
      scrollDirection: Axis.horizontal,
      shrinkWrap: true,
      padding: const EdgeInsets.only(
        right: 8,
      ),
      // itemCount: categoryController.,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          child: Center(
            child: Column(
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Container(
                    width: 200,
                    height: 120,

                    // width: double.infinity,
                    child: ElevatedButton(
                      style: ElevatedButton.styleFrom(
                          backgroundColor: Colors.white,
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(20),
                              side: BorderSide(color: Color(0xFF1818B4)))),
                      onPressed: () {},
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          // Text(
                          //   categoryController.category?.data![index].categoryName,
                          //   style: TextStyle(
                          //     color: Colors.black,
                          //   ),
                          // ),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

Here is my Category.dart model file

class Category {
  List<Data>? data;

  Category({required this.data});

  Category.fromJson(Map<String, dynamic> json) {
    if (json['data'] != null) {
      data = <Data>[];
      json['data'].forEach((v) {
        data!.add(new Data.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.data != null) {
      data['data'] = this.data!.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class Data {
  int? id;
  String? image;
  String? categoryName;
  String? categoryDes;
  int? activation;
  String? createdAt;
  String? updatedAt;

  Data(
      {required this.id,
      required this.image,
      required this.categoryName,
      required this.categoryDes,
      required this.activation,
      required this.createdAt,
      required this.updatedAt});

  Data.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    image = json['image'];
    categoryName = json['category_name'];
    categoryDes = json['category_des'];
    activation = json['activation'];
    createdAt = json['created_at'];
    updatedAt = json['updated_at'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['image'] = this.image;
    data['category_name'] = this.categoryName;
    data['category_des'] = this.categoryDes;
    data['activation'] = this.activation;
    data['created_at'] = this.createdAt;
    data['updated_at'] = this.updatedAt;
    return data;
  }
}

Here is my Controller CategoryController.dart file

import 'dart:convert';

import 'package:get/get.dart';
import 'package:we_serve/models/Category.dart';
import 'package:http/http.dart' as http;

class CategoryController extends GetxController{
  var isLoading = false.obs;
  Category? _category;

  // Category? get category => _category;

  fetchData() async {
    try{
      isLoading(true);
      http.Response response = await http.get(Uri.tryParse('http://127.0.0.1:8000/api/category')!);
      // print(response.statusCode);
      if(response.statusCode == 200){
        var result = jsonDecode(response.body);
        // print(result);
        _category = Category.fromJson(result);
      }else{
        print("Error Fetching data");
      }
    }catch(e){
      print("Error while getting data is $e");
    }finally{
      isLoading(false);
    }
  }


}

http://127.0.0.1:8000/api/category returning this json file

{
    "data": [
        {
            "id": 1,
            "image": "public/category_images/U5WWF8C0Pfz3dF44ejs7XkguuNoynsgYKO3CjpxY.jpg",
            "category_name": "test 1",
            "category_des": "test category 1",
            "activation": 1,
            "created_at": "2023-07-19T09:58:32.000000Z",
            "updated_at": "2023-07-19T09:58:32.000000Z"
        },
        {
            "id": 2,
            "image": "public/category_images/MBMi7FgEo1wlEDR4QbZRdRv6T6xWLUL2yddoMcg6.jpg",
            "category_name": "test 2",
            "category_des": "test category 2",
            "activation": 1,
            "created_at": "2023-07-19T09:58:53.000000Z",
            "updated_at": "2023-07-19T09:58:53.000000Z"
        },
        {
            "id": 3,
            "image": "public/category_images/oN8UZu9v6B504IfFbvPeSWEI3IvWGR8Rc1R5t1WP.jpg",
            "category_name": "test 3",
            "category_des": "test category 3",
            "activation": 1,
            "created_at": "2023-07-19T09:59:04.000000Z",
            "updated_at": "2023-07-19T10:10:03.000000Z"
        }
    ]
}

I don't know how to solve this, but it seems that in controller _category = Category.fromJson(result); this line of code doesn't work or doesn't store the data into _category list. I am not sure but just assuming there is some problem in model or controller.

can you provide the result from the 'http://127.0.0.1:8000/api/category'? — Arbiter Chil, Jul 22 '23 at 09:22
Experts agree to look elsewhere besides GetX. If you're on the flutter discord, type ?getx. Otherwise, this seven minute video presents a good detailed description of "why not getx": https://youtu.be/zlIgy4es5Ts — Randal Schwartz, Jul 22 '23 at 17:30

Arbiter Chil · Answer 1 · 2023-07-23T05:03:38.140

Try this as model

import 'dart:convert';

Category categoryFromJson(String str) => Category.fromJson(json.decode(str));

String categoryToJson(Category data) => json.encode(data.toJson());

class Category {
    List<Datum>? data;

    Category({
        this.data,
    });

    factory Category.fromJson(Map<String, dynamic> json) => Category(
        data: json["data"] == null ? [] : List<Datum>.from(json["data"]!.map((x) => Datum.fromJson(x))),
    );

    Map<String, dynamic> toJson() => {
        "data": data == null ? [] : List<dynamic>.from(data!.map((x) => x.toJson())),
    };
}

class Datum {
    int? id;
    String? image;
    String? categoryName;
    String? categoryDes;
    int? activation;
    DateTime? createdAt;
    DateTime? updatedAt;

    Datum({
        this.id,
        this.image,
        this.categoryName,
        this.categoryDes,
        this.activation,
        this.createdAt,
        this.updatedAt,
    });

    factory Datum.fromJson(Map<String, dynamic> json) => Datum(
        id: json["id"],
        image: json["image"],
        categoryName: json["category_name"],
        categoryDes: json["category_des"],
        activation: json["activation"],
        createdAt: json["created_at"] == null ? null : DateTime.parse(json["created_at"]),
        updatedAt: json["updated_at"] == null ? null : DateTime.parse(json["updated_at"]),
    );

    Map<String, dynamic> toJson() => {
        "id": id,
        "image": image,
        "category_name": categoryName,
        "category_des": categoryDes,
        "activation": activation,
        "created_at": createdAt?.toIso8601String(),
        "updated_at": updatedAt?.toIso8601String(),
    };
}

then for the controller inside try putting this

class CategoryController extends GetxController{
  var isLoading = false.obs;
  Rx<Category> _category = Category().obs;

  // Category? get category => _category;

  fetchData() async {
    try{
      isLoading(true);
      http.Response response = await http.get(Uri.tryParse('http://127.0.0.1:8000/api/category')!);
      // print(response.statusCode);
      if(response.statusCode == 200){
        var result = jsonDecode(response.body);
        // print(result);
        _category.value = Category.fromJson(result);
       // try to add update()
        update();
      }else{
        print("Error Fetching data");
      }
    }catch(e){
      print("Error while getting data is $e");
    }finally{
      isLoading(false);
    }
  }


}

I hope this helps i think try to change the model for now

Update:

try wrp the code like this

This is for GetBuilder
// This particular builder is good for heavy widgets
// and for the state to change is need to add update();
// e.g.
// variable.value = "change";
// update(); // Require to add update below.
// for every states variables. 
   return GetBuilder<CategoryController>(
     init: CategoryController(),
     builder:(controller){
        return WidgetSome();
      }
    );

The other one is OBX

  // This on is good for light states changes in ui unlike getbuilder
  // as sample variable is like this
  // variable("change");
  // But i usually use GetBuilder but still depends on you.
  return Obx(
    ()=> 
      WidgetSome(),
  );

for http to add headers is simple it's already indicate on the package you used although need to type them like this,

final header = {
       'Content-type': 'application/json',
       'Accept': 'application/json'
     };
  final urlParse = Uri.parse(http://127.0.0.1:8000/api/category');
   http.Response response = await http.get(urlParse,headers: header);

I have updated my code with this code. but still have the same problem. — MUHTASIM JEET, Jul 22 '23 at 18:05
Have you tried wrapping the listview builder with Obx or GetBuilder maybe this is just ui error or missing something to show data, If the api have result ang printed it the problem may lie to the ui side state. — Arbiter Chil, Jul 22 '23 at 18:21
Also try to add headers to http to have Content-type:application/json — Arbiter Chil, Jul 22 '23 at 18:23
Can you please elaborate how i wrapping the code and how to add content-type. I am quite new and trying to solve this from last two days. If needed i can provide you the `main.dart` file code. — MUHTASIM JEET, Jul 22 '23 at 18:37
Sure, Something like this wrapping the code from builder or obx for http add headers — Arbiter Chil, Jul 23 '23 at 04:53

Error fetching data by GetX. Error on model define or else

1 Answers1