Bitcoin Ticker

0. Final Product

• coinapi.io 에서 코인의 각국 통화별 시세를 받아와서 실시간으로 보여주는 어플리케이션
• 참고로 나는 지금 나스닥에 물려있는 상황이다.
• kihyeonkwon/bitcoin-ticker-flutter (github.com) (opens new window)

1. services

coin_data.dart

import 'package:http/http.dart' as http;
import 'dart:convert' as convert;

const String apiKey = '########################';
const String endPoint = 'rest.coinapi.io';

const List<String> currenciesList = [
  'CAD',
  'CNY',
  'EUR',
  'GBP',
  'HKD',
  'IDR',
  'JPY',
  'KRW',
  'NZD',
  'USD',
];

const List<String> cryptoList = [
  'BTC',
  'ETH',
  'LTC',
];

class CoinData {
  Future<dynamic> getRate(crypto, currency) async {
    var url = Uri.https(endPoint, '/v1/exchangerate/$crypto/$currency');
    var response = await http.get(url, headers: {"X-CoinAPI-Key": apiKey});
    if (response.statusCode == 200) {
      var jsonResponse = convert.jsonDecode(response.body);
      return jsonResponse;
    } else {
      print(response.statusCode);
    }
  }
}

• 사용할 currencyList와 cryptoList를 작성한다(api 참조)
• reponse를 받아 jsonResponse로 리턴해준다.

2. pages

price_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:bitcoin_ticker/utility/coin_data.dart';
import 'dart:io' show Platform;

class PriceScreen extends StatefulWidget {
  @override
  _PriceScreenState createState() => _PriceScreenState();
}

class _PriceScreenState extends State<PriceScreen> {
  CoinData coinData = CoinData();
  String selectedCurrency = 'USD';
  Map<String, String> cryptoPrice = {};

  updatePrice() async {
    for (String crypto in cryptoList) {
      var response = await coinData.getRate(crypto, selectedCurrency);
      cryptoPrice[crypto] = response['rate'].toStringAsFixed(0);
    }
    setState(() {});
  }

  List<Widget> cryptoCard() {
    List<Widget> cardList = [];
    for (String crypto in cryptoList) {
      cardList.add(
        Padding(
          padding: EdgeInsets.fromLTRB(18.0, 18.0, 18.0, 0),
          child: Card(
            color: Colors.lightBlueAccent,
            elevation: 5.0,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
            child: Padding(
              padding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 28.0),
              child: Text(
                '1 $crypto = ${cryptoPrice[crypto]} $selectedCurrency',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 20.0,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      );
    }

    return cardList;
  }

  DropdownButton androidDropdown() {
    return DropdownButton<String>(
      value: selectedCurrency,
      icon: const Icon(Icons.arrow_downward),
      iconSize: 24,
      elevation: 16,
      style: const TextStyle(color: Colors.white),
      underline: Container(
        height: 2,
        color: Colors.white,
      ),
      onChanged: (String newValue) {
        selectedCurrency = newValue;
        updatePrice();
      },
      items: currenciesList.map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
    );
  }

  CupertinoPicker iosPicker() {
    return CupertinoPicker(
      itemExtent: 32,
      onSelectedItemChanged: (value) {
        print(currenciesList[value]);
      },
      children: currenciesList.map((currency) {
        return Text(currency);
      }).toList(),
    );
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    updatePrice();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('🤑 Coin Ticker'),
        ),
        body: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Column(
                children: cryptoCard(),
                crossAxisAlignment: CrossAxisAlignment.stretch,
              ),
              Container(
                  height: 150.0,
                  alignment: Alignment.center,
                  padding: EdgeInsets.only(bottom: 30.0),
                  color: Colors.lightBlue,
                  child: Platform.isIOS ? iosPicker() : androidDropdown())
            ]));
  }
}

• currencyPicker는 사용환경에 따라 ios와 android 버전이 선택이 된다.
  • import 'dart:io' show Platform; 를 통해 사용기기를 확인할 수 있다.
  • Platform.isIOS ? iosPicker() : androidDropdown()
• for문을 이용하여 cryptoList에 있는 crypto에 관한 시세를 하나하나 불러온다.
• cryptoPrice라는 map을 정의해주고 값을 저장한다.
• currenciesList.map을 이용해서 갖고 있는 currency에 대한 버튼을 만들어준다.
• cardList라는 List 위젯을 리턴해주는 함수를 만들어서 코인에 관한 가격표 리스트를 만든다.