simple 코인 어플 만들기, 암호화 화폐 Bitcoin App , json으로

 

 

​

비트코인등 안호화 화폐의 정보를 json을 이용해서 보여주는

APP 뚝딱 ~

// 주의사항 . json 제공 사이트는 수시로 업데이트 됨으로 직접 찾아서 고쳐야 하실 수있습니다. 경로가 바뀌는 경우가 있습니다.

 

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:noti_local/a_drawer.dart';

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

  @override
  State<CoinHomeScreen> createState() => _CoinHomeScreenState();
}

class _CoinHomeScreenState extends State<CoinHomeScreen> {
  List<dynamic> criptoData = [];

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

//https://api.coingecko.com/api/v3/coins/?markets?vs_currency=usd&order=market_cap
  Future<void> getCryptoData() async {
    final response = await http.get(Uri.parse(
        'https://api.coingecko.com/api/v3/coins/?markets?vs_currency=usd&order=market_cap_desc&per_page=50&page=1&sparkline=false'));
    if (response.statusCode == 200) {
      setState(() => criptoData = json.decode(response.body));
    } else {
      throw Exception('Failed to load data');
    }
  }

  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.of(context).size.height;
    return Scaffold(
      drawer: ADrawer(),
      appBar: AppBar(title: Text('Coin list')),
      body: Container(
        height: height,
        child: Column(
          children: [
            Container(
              height: height * .4,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(25),
                border: Border.all(width: 5, color: Colors.white24),
              ),
              child: _CoinListBuild(),
            ),
            SizedBox(height: 20),
            Container( height: height * .4,
              decoration: BoxDecoration(
                //color: Colors.greenAccent.withOpacity(0.3),
                borderRadius: BorderRadius.circular(25),
                border: Border.all(width: 5, color: Colors.white24),
              ),
              child: _CoinListBuild2(),
            )
            //_CoinListBuild2(),
          ],
        ),
      ),
    );
  }

  _CoinListBuild() {
    return ListView.builder(
        itemCount: criptoData.length,
        itemBuilder: (context, index) {
          final crypto = criptoData[index];
          final name = crypto['name'];
          final symbol = crypto['symbol'];
          final image = crypto['image']['thumb'];
          final price = crypto['market_data']['current_price']['usd'];
          final paiceChange = crypto['market_data']['price_change_24h'];
          return ListTile(
            textColor: Colors.white,
            leading: Image.network(image),
            title: Text('$name - $symbol'),
            subtitle: Text('change24 : \$ ${paiceChange.toStringAsFixed(2)}'),
            trailing: Text('\$ ${price}', style: TextStyle(fontSize: 15)),
          );
        });
  }

  _CoinListBuild2() {
    return GridView.builder(
        gridDelegate:
            const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, crossAxisSpacing: 2, mainAxisSpacing: 2),
        itemCount: criptoData.length,
        itemBuilder: (context, index) {
          final crypto = criptoData[index];
          final name = crypto['name'];
          final symbol = crypto['symbol'];
          final image = crypto['image']['thumb'];
          final price = crypto['market_data']['current_price']['usd'];
          return Container(
            padding: EdgeInsets.all(10),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(25),
              border: Border.all(width: 3, color: Colors.white),
            ),
            child: Column(
              children: [
                SizedBox(height: 50,
                child: Image.network(image)),
                Text('$name - $symbol',style: TextStyle(fontWeight: FontWeight.bold,fontSize: 13)),
                Text('\$ ${price}', style: TextStyle(fontSize: 13)),
              ],
            ),
          );
        });
  }

  //
}

 

#BitCoin #Crypto #App #flutter #ui #Ethereum #coin