Flutter Dart -> Capturing data from a class that receives json

Question

Good guys? I’m a beginner in flutter, and I’m working on a ready-made template. In this template I have the class Category.Dart that receives the json values of service.Dart and so far everything is ok. What I need to do is call the Category class data into the Appdata class in the data.Dart file, thus replacing the fixed sample data with the dynamic data.

Service.Dart

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:../src/model/category.dart';


class Connection {

  static const ROOT = 'http://localhost/get_category.php';
  static const _GET_ALL_ACTION = 'GET_ALL';
  static const _ADD_CAT_ACTION = 'ADD_CAT';
  static const _UPDATE_CAT_ACTION = 'UPDATE_CAT';
  static const _DELETE_CAT_ACTION = 'DELETE_CAT';

  static Future<List<Category>> getCategories() async {
    try {
      var map = Map<String, dynamic>();
      map['acao'] = _GET_ALL_ACTION;
      final response = await http.post(ROOT, body: map);
      print('getCategories -> Response :: ${response.body}');

      if(response.statusCode == 200) {
        List<Category> list = parseResponse(response.body);
        return list;
      }else{
        return List<Category>();
      }

    }catch (e) {
        return List<Category>();
    }
  }

  static List<Category> parseResponse(String response) {
    final parsed = json.decode(response).cast<Map<String, dynamic>>();
    return parsed.map<Category>((json) => Category.fromJson(json)).toList();
  }

Category.Dart

class Category{
  String id ;
  String name ;
  String image ;
  String description;
  bool isSelected;
  Category({this.id,this.name,this.image, this.description, this.isSelected});

  factory Category.fromJson(Map<String, dynamic> json) {
    return Category(
    id: json['cod'] as String,
    name: json['nome'] as String,
    image: json['thumb'] as String,
    description: json['descricao'] as String,
    );
  }
}

data.Dart

import 'package:flutter/material.dart';
import 'package:klug_ml/src/model/category.dart';

class AppData {
  static List<Category> categoryList = [
Category() //quero chamar os dados da categoria aqui

//Os dados dinâmicos, devem carregar como o exemplo abaixo.
Category(id:1,name: "Sneakers",image: 'assets/shoe_thumb_2.png',isSelected: true),
Category(id:2,name: "Jacket", image: 'assets/jacket.png'),
Category(id:3,name: "Watch", image: 'assets/watch.png'),

];
}

Call of the Appdata Class in the project.

  Widget _categoryWidget() {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 10),
      width: AppTheme.fullWidth(context),
      height: 80,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: AppData.categoryList
            .map(
              (category) => ProductIcon(
                model: category,
                onSelected: (model) {
                  setState(() {
                    AppData.categoryList.forEach((item) {
                      item.isSelected = false;
                    });
                    model.isSelected = true;
                  });
                },
              ),
            )
            .toList(),
      ),
    );
  }

Answer 1

Following are examples:

void main() {
  String catJson = '{"cod": "1", "nome": "Sneakers","thumb":"assets/shoe_thumb_2.png"}';
  final catMap = jsonDecode(catJson);
  var cat = Category.fromJson(catMap);
  print(cat.name);

  
  Map<String, dynamic> catMap2 = {"cod": "1", "nome": "Sneakers","thumb":"assets/shoe_thumb_5.png"};
  cat = Category.fromJson(catMap2);
  print(cat.image);  
}

The first example is what best suits you if you receive a json

Source: https://dartpad.dev/32e42d2720b04b0bef90c5b38a8266d4

Answer 2

The initial idea of this "serialization" that you mounted on your model is to receive a map of some method and turn it into objects of the class type. Then you will build a Category from a Map.

# Edited

In your class AppData is where the call of the method that returns API data will be made:

void main() {
  final appData = AppData();

  appData.metodoQueBuscaDadosNaApi();
}

class AppData {
  List<Category> categoryList = [];

  Future<void> metodoQueBuscaDadosNaApi() async {
    final categorias = await Connection.getCategories();

    // Preencher a lista de categorias aqui
    categoryList = categorias;

    for(final categoria in categoryList){
      print(categoria.name);
    }
  }
}

class Connection {
  static Future<List<Category>> getCategories() async {
    // Aqui é apenas uma simulação para o POST da requisição
    // esses dados são exemplo apenas
    final categorias = [
      Category(name: "Cat 1"),
      Category(name: "Cat 2"),
      Category(name: "Cat 3"),
    ];

    return categorias;
  }
}

class Category {
  String id;
  String name;
  String image;
  String description;
  bool isSelected;
  Category({
    this.id,
    this.name,
    this.image,
    this.description,
    this.isSelected,
  });

  factory Category.fromJson(Map<String, dynamic> json) {
    return Category(
      id: json['cod'] as String,
      name: json['nome'] as String,
      image: json['thumb'] as String,
      description: json['descricao'] as String,
    );
  }
}

Go to the Dartpad and paste all this code. So you can better understand how it works and even play with the implementation to adjust your need.