How to Build a Bitcoin Tracker Flutter App?

In this article, we will be building a Bitcoin Tracker Project using Flutter and Dart . The application will display the current rates of Bitcoin in different countries using Bitcoin API. There are many free APIs available and for this project, we will be using API by Coinlayer. The API will return a JSON that we will parse according to our needs. There will be a single screen in this app.

Step-by-Step Implementation

Step 1: Create a new flutter application

We can create new flutter application directly using the command line statement as mentioned below:

flutter create <YOUR_APP_NAME>

To know more about Creating flutter application refer to Creating a Simple Application in Flutter article.

Step 2: Adding Dependencies to the Application

- Add http package to your pubspec.yaml file

http: ^1.3.0

- Adding Bitcoin Image

Download the bitcoin image from here and add it into your project inside the your_app_name/asset/bitcoin_img.jpeg and write the location pubspec.yaml file.

assets:
    - assets/bitcoin_img.jpeg

To know more about adding images in the application refer to Flutter - Asset Image.

Step 3: Get API Key

You need to create a free account on Coinlayer and get an API key for this project.

SignUp using your account information, and you will get your API key.
Click on “Get free API key” on the website.
Store this API key to be used in the Main Application.

Step 4 : Use the below code in the main.dart file

Important: Make sure to replace the api key with your own api key.

main.dart:

Dart

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

void main() {
  runApp(const MyApp()); // Start the app
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // Hide the debug banner
      home: BitCoinTracker(), // Set the home screen to BitCoinTracker
    );
  }
}

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

  @override
  _BitCoinTrackerState createState() => _BitCoinTrackerState();
}

class _BitCoinTrackerState extends State<BitCoinTracker> {
  final String apiKey = 'YOUR_API_KEY'; // API key for coinlayer
  String selectedCurrency = 'USD'; // Default currency
  String bitcoinPrice = 'Fetching...'; // Initial bitcoin price

  final List<String> currencies = [
    'AUD', 'BRL', 'CAD', 'CNY', 'EUR', 'GBP', 'HKD', 'JPY', 'PLN', 'RUB', 'SEK', 'USD', 'ZAR'
  ]; // List of currencies

  @override
  void initState() {
    super.initState();
    fetchBitcoinPrice(selectedCurrency); // Fetch bitcoin price when the app starts
  }

  Future<void> fetchBitcoinPrice(String currency) async {
    final url = 'https://api.coinlayer.com/live?access_key=$apiKey&target=$currency&symbols=BTC';
    try {
      final response = await http.get(Uri.parse(url)); // Make HTTP GET request
      setState(() {
        if (response.statusCode == 200) {
          final data = json.decode(response.body); // Decode JSON response
          bitcoinPrice = data['rates']['BTC'].toString(); // Update bitcoin price
        } else {
          bitcoinPrice = 'Error fetching data'; // Handle error
        }
      });
    } catch (e) {
      setState(() {
        bitcoinPrice = 'Error fetching data'; // Handle exception
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bitcoin Tracker'), // App bar title
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Image.asset('assets/bitcoin_img.jpeg', height: 200, width: 200), // Bitcoin image
              SizedBox(height: 32),
              Text(
                '$bitcoinPrice',
                style: TextStyle(
                    fontSize: 30,
                    fontWeight: FontWeight.bold,
                    color: Colors.orange), // Display bitcoin price
              ),
              SizedBox(height: 32),
              Text(
                'Base Currency',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold), // Base currency label
              ),
              SizedBox(height: 16),
              DropdownButton<String>(
                value: selectedCurrency,
                items: currencies.map((String currency) {
                  return DropdownMenuItem<String>(
                    value: currency,
                    child: Text(currency), // Currency options
                  );
                }).toList(),
                onChanged: (String? newValue) {
                  setState(() {
                    selectedCurrency = newValue!; // Update selected currency
                    fetchBitcoinPrice(selectedCurrency); // Fetch new bitcoin price
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

To check the git repository for the application : Click Here