How to get list from JSON data to display in widget?

Question

I have been making a simple app which displays crypto coins and their price, data, market cap etc. I am using CoinGeckGo API.

    import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';

class Coin {
  String? coinName;
  String? coinPrice;
  String? coinImgUrl;
  String? coinVol;
  Coin(
      {@required this.coinName,
      @required this.coinPrice,
      @required coinImgUrl,
      @required coinVol});
}

class Coins {
  Future<List<Coin>> fetchCoinsData() async {
    var uri = Uri.parse(
        "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false");
    final response = await http.get(uri);
    final json = await jsonDecode(response.body);
    List<Coin> coins = [];
    for (int i = 0; i < json.length; i++) {
      Coin coin = Coin(
        coinImgUrl: json[i]["image"].toString(),
        coinName: json[i]["symbol"].toString(),
        coinPrice: json[i]["current_price"].toString(),
        coinVol: json[i]["total_volume"].toString(),
      );
     coins.add(coin);
    }

    return coins;
  }
}

this is my function to fetch data from json api and add them into list so that i get values from that list to display in widget.

but when I am calling this function in init state, and assign fetched return value to a list i get output "Instance of 'Coin', but it should be like {coinName:'btc',coinPrice: '48000', coinVol: 478965455 like that below is code i am calling function inside initstate.

class _MyHomePageState extends State<MyHomePage> {
  List<Coin> my_list = [];
  bool? _isLoading;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _isLoading = true;
    Coins().fetchCoinsData().then((List<Coin> value) {
      print(value);
      my_list = value;
      _isLoading = false;
    });
  }

Answer 1

Try below code hope its helpful to you. If you get data from API refer my answer here or here or here hope it's helpful to you

Your API Call function:

  Future<List<dynamic>> getCoinsData() async {
    String url =
        'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false';
    var response = await http.get(Uri.parse(url), headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    });
    return json.decode(response.body);
  }

Your Widget:

Column(
    children: <Widget>[
      Expanded(
        child: FutureBuilder<List<dynamic>>(
          future: getCoinsData(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: ListView.builder(
                  shrinkWrap: true,
                  itemCount: snapshot.data!.length,
                  itemBuilder: (context, index) {
                    var name = snapshot.data![index]['name'];
                    var symbol = snapshot.data![index]['symbol'];
                    var image = snapshot.data![index]['image'];
                    var currentPrice =
                        snapshot.data![index]['current_price'];
                    var totalVolume =
                        snapshot.data![index]['total_volume'];
                    var id = snapshot.data![index]['id'];
                    return Card(
                      shape: RoundedRectangleBorder(
                        side: BorderSide(color: Colors.green.shade300),
                        borderRadius: BorderRadius.circular(15.0),
                      ),
                      child: Column(
                        children: [
                          ListTile(
                            leading: CircleAvatar(
                              backgroundColor: Colors.transparent,
                              child: Image.network(image),
                            ),
                            title: Text(name),
                            subtitle: Text(
                              "Symbol - " +
                                  symbol +
                                  "\nTotal Volume -" +
                                  totalVolume.toString() +
                                  "\nCurrent Price -" +
                                  currentPrice.toString(),
                            ),
                            trailing: Text(id),
                          ),
                        ],
                      ),
                    );
                  },
                ),
              );
            }
            return CircularProgressIndicator();
          },
        ),
      ),
    ],
  ),

Your Result Screen: