API Calling with Dio Library (Third API)

 import "package:flutter/material.dart";

import "package:dio/dio.dart";

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Third API Calling with Dio",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.grey,
          centerTitle: true,
        ),
      ),
      home: const ThirdDio(),
    );
  }
}

class ThirdDio extends StatefulWidget {
  const ThirdDio({super.key});

  @override
  State<ThirdDio> createState() {
    return ThirdDioState();
  }
}

class ThirdDioState extends State<ThirdDio> {
  var jsonlist = [];

  @override
  void initState() {
    super.initState();
    getData();
  }

  void getData() async {
    try {
      var response =
          await Dio().get("https://jsonplaceholder.typicode.com/users");
      print(response);

      if (response.statusCode == 200) {
        setState(() {
          jsonlist = response.data as List;
        },);
      } else {
        print(response.statusCode);
      }
    } catch (e) {
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "Third API Calling with Dio",
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
      ),
      body: ListView.builder(
        itemCount: jsonlist == null ? 0 : jsonlist.length,
        itemBuilder: (context, index) {
          return Card(
            child: ListTile(
              title: Text(
                jsonlist[index]["id"].toString(),
                style: const TextStyle(fontWeight: FontWeight.bold),
              ),
              subtitle: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "Name : ${jsonlist[index]["name"]}",
                    style: const TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Text(
                    "Username : ${jsonlist[index]["username"]}",
                    style: const TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Text(
                    "Email : ${jsonlist[index]["email"]}",
                    style: const TextStyle(fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 10.0),
                  Text("Address : ${jsonlist[index]["address"].toString()}"),
                  const SizedBox(height: 10.0),
                  Text(
                    "Phone : ${jsonlist[index]["phone"]}",
                    style: const TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Text(
                    "Website : ${jsonlist[index]["website"]}",
                    style: const TextStyle(fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 10.0),
                  Text("Company : ${jsonlist[index]["company"]}"),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}