API Calling with Dio Example with Model Class

 import "package:firebase/self_practice/display_product.dart";

import "package:firebase/self_practice/productModel.dart";
import "package:flutter/material.dart";
import "package:get/get.dart";
import "package:dio/dio.dart";

void main()
{
  runApp(MyApp());
}
class MyApp extends StatelessWidget
{
  MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: "API Calling with DIO",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.grey,
      ),
      home: ApiCall(),
    );
  }
}
class ApiCall extends StatelessWidget
{
  ApiCall({super.key});

  Future<List<Product>> apiCalling() async {
    var response = await Dio().get("https://fakestoreapi.com/products");

    final List<dynamic> responseData = response.data;
    List<Product> products = responseData.map((json) {
      return Product.fromJson(json);
    }).toList();

    return products;
    // print(response.data.toString());
    // return response.data;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("API Calling with DIO"),
        centerTitle: true,
        backgroundColor: Colors.grey,
      ),
      body: FutureBuilder<List<Product>>(
        future: apiCalling(),
        builder: (BuildContext context, AsyncSnapshot<List<Product>> snapshot) {
          if(snapshot.hasData)
            {
              return ListView.builder(
                itemCount: snapshot.data!.length,
                itemBuilder: (BuildContext context, int index) {
                  return GestureDetector(
                    onTap: () {
                      Get.to(() {
                        return DisplayProduct(
                          product: snapshot.data![index],
                        );
                      },);
                    },
                    child: Card(
                      child: ListTile(
                        title: Text("${snapshot.data![index].title}"),
                        subtitle: Text("${snapshot.data![index].price}"),
                      ),
                    ),
                  );
                },
              );
            }
          else
            {
              return const Center(child: CircularProgressIndicator());
            }
        },
      ),
    );
  }
}

import "package:firebase/self_practice/productModel.dart";
import "package:flutter/material.dart";

class DisplayProduct extends StatelessWidget
{
  final Product product;

  DisplayProduct({
    required this.product,
});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Display Product"),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Container(
            width: 350.0,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Text(product.title.toString()),
                const SizedBox(height: 20.0),
                Text(product.price.toString()),
                const SizedBox(height: 20.0),
                Text(product.description.toString()),
                const SizedBox(height: 20.0),
                Text(product.rating.rate.toString()),
                const SizedBox(height: 20.0),
                Text(product.rating.count.toString()),
              ],
            ),
          ),
        ),
      ),
    );
  }

}
/// Creating a Model Class as shown below

class Product
{
  int id;
  String title;
  double price;
  String description;
  String category;
  String image;
  ProductRating rating;

  Product({
    required this.id,
    required this.title,
    required this.price,
    required this.description,
    required this.category,
    required this.rating,
    required this.image,
});

  factory Product.fromJson(Map<String, dynamic> json) {
    return Product(
      id: json["id"],
      title: json["title"],
      price: json["price"].toDouble(),
      description: json["description"],
      category: json["category"],
      rating: ProductRating.fromJson(json["rating"]),
      image: json["image"],
    );
  }

}
class ProductRating
{
  double rate;
  int count;

  ProductRating({required this.rate, required this.count});

  factory ProductRating.fromJson(Map<String, dynamic> json) {
    return ProductRating(
      rate: json["rate"].toDouble(),
      count: json["count"],
    );
  }
}