Flutter HTTP GET Multiple data - fauziardha1/learn-flutter GitHub Wiki

status: Success

class Resources {
  int id;
  String name;
  int year;
  String color;
  String pantonValue;

  Resources({this.id, this.name, this.year, this.color, this.pantonValue});

  factory Resources.createResouce(Map<String, dynamic> jsonObject) {
    return Resources(
      id: jsonObject["id"],
      name: jsonObject["name"],
      year: jsonObject["year"],
      color: jsonObject["color"],
      pantonValue: jsonObject["pantone_value"],
    );
  }

  static Future<List<Resources>> getFromAPI(int id) async {
    String url = "https://reqres.in/api/unknown";
    var apiResult = await http.get(url);
    var jsonData = json.decode(apiResult.body);

    List<Resources> resources = [];

    for (var item in jsonData["data"]) {
      resources.add(Resources.createResouce(item));
    }

    return resources;
  }
}

class GetAppMultipleData extends StatefulWidget {
  @override
  _GetAppMultipleDataState createState() => _GetAppMultipleDataState();
}

class _GetAppMultipleDataState extends State<GetAppMultipleData> {
  List<Resources> resources = [];
  List<SimpleResourcesView> resourcesView = [];

  void loadResourcesView(List<Resources> resources) {
    List<SimpleResourcesView> data = [];
    for (var resource in resources) {
      data.add(SimpleResourcesView(
        resources: resource,
      ));
    }
    setState(() {
      resourcesView = data;
    });
  }

  @override
  void initState() {
    loadResourcesView(resources);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("HTTP APP")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Flexible(
              flex: 2,
              child: resourcesView.length > 0
                  ? ListView.builder(
                      padding: EdgeInsets.all(10),
                      itemBuilder: (_, int index) => resourcesView[index],
                      itemCount: resources.length ?? 0,
                    )
                  : Text("noData"),
            ),
            RaisedButton(
                color: Colors.blue,
                elevation: 10,
                onPressed: () {
                  Resources.getFromAPI(3).then((value) {
                    resources = value;
                    loadResourcesView(resources);
                    setState(() {});
                  });
                },
                child: Text(
                  "GET Data",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ))
          ],
        ),
      ),
    );
  }
}

class SimpleResourcesView extends StatelessWidget {
  final Resources resources;

  SimpleResourcesView({this.resources});

  @override
  Widget build(BuildContext context) {
    var hexColor = resources.color.replaceAll("#", "");
    hexColor = "0xFF" + hexColor;
    var color = Color(int.parse(hexColor));
    return Container(
      height: 100,
      color: color,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
                " id : ${resources.id} \n name: ${resources.name} \n year : ${resources.year} \n color : ${resources.color}"),
          ],
        ),
      ),
    );
  }
}