Main.dart

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyHomePage();
}

class MyHomePage extends State<MyApp> {
  List<CoinMarket> list; // List result after getting from API will hold here
  var refreshKey = GlobalKey<RefreshIndicatorState>();

  @override
  void initState() {
    super.initState();
    //refreshListCoin();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "CRYPTO COIN TRACKER",
      theme: ThemeData.dark(),
      home: Scaffold(
        appBar: AppBar(title: Text('CRYPTO COIN TRACKER')),
        body: Center(
          child: FutureBuilder(
            future: fetchListCoin(),
            builder: (context, AsyncSnapshot snapshot) {
              if (snapshot.data == null) {
                return new CircularProgressIndicator();
              } else {
                print(snapshot.data);
                List<CoinMarket> coins = snapshot.data;

                return ListView.builder(
                    itemCount: coins.length,
                    itemBuilder: (context, index) {
                      return Container(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: <Widget>[

                         Text('${coins[index].symbol} | ${coins[index].name}'),
                            // Main root row
//                            Row(
//                              children: <Widget>[
//                                Column(
//                                  crossAxisAlignment: CrossAxisAlignment.start,
//                                  children: <Widget>[
//                                    Container(
//                                      padding: const EdgeInsets.only(
//                                          left: 8.0, bottom: 8.0),
//                                      child: Image.network(
//                                          'https://res.cloudinary.com/dxi90ksom/image/upload/${coins[index].symbol.toLowerCase()}.png'),
//                                      width: 56.0,
//                                      height: 56.0,
//                                    )
//                                  ],
//                                ),
//                                Column(
//                                  crossAxisAlignment: CrossAxisAlignment.start,
//                                  children: <Widget>[
//                                    Container(
//                                      padding: const EdgeInsets.all(4.0),
//                                      child: Text(
//                                          '${coins[index].symbol} | ${coins[index].name}'),
//                                    )
//                                  ],
//                                ),
//                                Expanded(
//                                  child: Container(
//                                    child: Column(
//                                      crossAxisAlignment: CrossAxisAlignment.end,
//                                      children: <Widget>[
//                                        Container(
//                                          padding: const EdgeInsets.all(8.0),
//                                          child: Text(
//                                              '\$${double.parse(coins[index].price_usd).toStringAsFixed(2)}'),
//                                        ),
//                                      ],
//                                    ),
//                                  ),
//                                )
//                              ],
//                            ),
//
//                            Container(
//                              padding: const EdgeInsets.all(4.0),
//                              child: Row(
//                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
//                                children: <Widget>[
//                                  Text(
//                                    '1h:${coins[index].percent_change_1h}%',
//                                    style: TextStyle(
//                                        color: getColor(
//                                            coins[index].percent_change_1h)),
//                                  ),
//                                  Text(
//                                    '24h:${coins[index].percent_change_24h}%',
//                                    style: TextStyle(
//                                        color: getColor(
//                                            coins[index].percent_change_24h)),
//                                  ),
//                                  Text(
//                                    '7d:${coins[index].percent_change_7d}%',
//                                    style: TextStyle(
//                                        color: getColor(
//                                            coins[index].percent_change_7d)),
//                                  ),
//                                ],
//                              ),
//                            ),
                          ],
                        ),
                      );
                    });
              }
            },
          ),
        ),
      ),
    );
  }
}

getColor(String percent) {
  if (percent.contains("-")) {
    return hexToColor('FF0000');
  } else {
    return hexToColor('32CD32');
  }
}

hexToColor(String color) {
  return new Color((int.parse(color.substring(1, 7), radix: 16) + 0xFF000000));
}

Future<List<CoinMarket>> fetchListCoin() async {
  final api_endpoint =
      await http.get('https://api.coinmarketcap.com/v1/ticker/');
  //await http.get('https://api.coinmarketcap.com/v1/ticker/?limit=50');

  if (api_endpoint.statusCode == 200) // HTTP OK
  {
    List coins = json.decode(api_endpoint.body);
    return coins.map((coin) => new CoinMarket.fromJson(coin)).toList();
  } else
    throw Exception('Failed to load Crypto Coin list');
}

class CoinMarket {
  final String id;
  final String name;
  final String symbol;
  final String price_usd;
  final String percent_change_1h;
  final String percent_change_24h;
  final String percent_change_7d;

  CoinMarket(
      {this.id,
      this.name,
      this.symbol,
      this.price_usd,
      this.percent_change_1h,
      this.percent_change_24h,
      this.percent_change_7d});

  factory CoinMarket.fromJson(Map<String, dynamic> json) {
    return CoinMarket(
      id: json['id'],
      name: json['name'],
      symbol: json['symbol'],
      price_usd: json['price_usd'],
      percent_change_1h: json['percent_change_1h'],
      percent_change_24h: json['percent_change_24h'],
      percent_change_7d: json['percent_change_7d'],
    );
  }
}