A basic cryptocurrency price-tracking application using flutter

Related tags

Templates CoiCoin
Overview

CoiCoin Cryto Tracker - Demo Product

This is a basic cryptocurrency price-tracking application to the Demo Product on Google DevFest HCMC 2021. Google DevFest HCMC 2021 is a special training course on Flutter which helps you to improve your knowledge of building the front-end of a realistic application.

Table of contents

Overview

The course

Through the training course, DevFest-ers should be able to:

  • Get used to the Dart Programming Language.
  • Know Layout, Navigation, and Theming in Flutter.
  • Manage State in Flutter
  • Build a Flutter App and do Testings.

Photos

  • Logo

Logo

  • Appview

Process

Built with

  • Dart
  • Colors, Icons, Credit Card Slider from Flutter Material and Package
  • Cryto APIs from CoinMarketCap

What we learned

After finishing the project, we can build a Menu Bar on the side, a Credit Card and a realtime automatically updated data using Cryto APIs.

  • Menu Bar
@override
  Widget build(BuildContext context) {
    return Drawer(
        child: ListView(
          children: [
            UserAccountsDrawerHeader(
              accountName: const Text('DevFestChan'),
              accountEmail: const Text('[email protected]'),
              currentAccountPicture: CircleAvatar(
                  child: ClipOval(
                    child: Image.asset('./assets/doge.jpg'),
                  )),
            ),
            ListTile(
                leading: const Icon(Icons.favorite),
                title: const Text('Coi Your Coin'),
            ListTile(
                leading: const Icon(Icons.money),
                title: const Text('Coi Your Card'),
          ],
    ));
  }
  • Credit Card.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Image.asset('assets/coicoin_logo.png', height: 30),
        ),
        body: Container(
          alignment: Alignment.center,
          padding: const EdgeInsets.fromLTRB(5.0, 40.0, 5.0, 0.0),
          child: Column(
            children: <Widget>[
              Text(
                '\$156.89',
                style: TextStyle(foreground: Paint()..shader = linearGradient)),
              Text(
                'Available Balance',
                style: TextStyle(foreground: Paint()..shader = linearGradient),
              ),
              const SizedBox(height: 50),
              Transform.scale(
                scale: 1.2,
                child: CreditCard(
                  cardBackground:
                      ImageCardBackground(const AssetImage('assets/card_bg.png')),
                  cardNetworkType: CardNetworkType.visa,
                  cardHolderName: 'DevFest HCMC',
                  cardNumber: '4716085933146241',
                  company: CardCompany.americanExpress,
                  validity: Validity(validThruMonth: 8, validThruYear: 2025),
                ),
              ),
            ],
          ),
        ));
  }
  • Cryto APIs.
  Future<List<Coin>> fetchCoin() async {
    coinList = [];
    filter = [];
    final response = await http.get(Uri.parse(
        'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false'));

    if (response.statusCode == 200) {
      List<dynamic> values = [];
      values = json.decode(response.body);
      if (values.isNotEmpty) {
        for (int i = 0; i < values.length; i++) {
          if (values[i] != null) {
            Map<String, dynamic> map = values[i];
            coinList.add(Coin.fromJson(map));
            filter.add(Coin.fromJson(map));
          }
        }
      }
      setState(() {
        coinList;
        filter;
      });
      return coinList;
    }
    else {
      throw Exception("Failed to load");
    }
  }

How to run

  $ dart --no-sound-null-safety run
  $ flutter run --no-sound-null-safety

Contributors

You might also like...

Official Flutter Tracking Library for Mixpanel Analytics

Official Flutter Tracking Library for Mixpanel Analytics

Table of Contents Introduction Quick Start Guide Install Mixpanel Initialize Mixpanel Send Data Check for Success I want to know more! Introduction We

Jan 4, 2023

It's an open source project for the steps tracking (Pedometer) built with Flutter.

It's an open source project for the steps tracking (Pedometer) built with Flutter.

Flutter Steps Tracker It's an open source project for the steps tracking (Pedometer) built with Flutter and integrated with Firebase as the initial ba

Nov 5, 2022

A digital diary and mood tracking app that helps you in keeping track of your mood and productivity throughout the month/year.

A digital diary and mood tracking app that helps you in keeping track of your mood and productivity throughout the month/year.

StarBook ✨ A digital diary that can help you in keeping track of your mood and productivity throughout the month. Mood tracker is a good way to see ho

Dec 23, 2022

App for tracking your expenses

Expense Manager App for tracking your expenses Purpose of the project This app may help people to control their spendings. My task was to create custo

Mar 13, 2022

Cross-platform mobile app for tracking GPS with IoT technologies.

Cross-platform mobile app for tracking GPS with IoT technologies.

IoT Tracking Cross-platform mobile app for tracking GPS with IoT technologies. Table of Contents Introduction Requirements Installation Build & Run Kn

Oct 2, 2022

Keep tracking your prayers.

Keep tracking your prayers.

تطبيق قضاء Keep tracking your prayers. مميزات التطبيق v1.0.0 سهولة وبساطة الواجهة. مجاني وخال من الاعلانات ومفتوح المصدر. اشعارات محفزة عند قضاء كل يو

Dec 30, 2022

A fully-customizable weightlifting tracking app.

A fully-customizable weightlifting tracking app.

BlockLifts Weightlifting App A fully-customizable weightlifting tracking app and my introduction to Dart/Flutter. Features Create an unlimited amount

Jan 9, 2023

Fitness Tracking App UI

Fitness Tracking App UI

Fitness Tracking App UI Support me on Patreon Watch on Youtube A new Flutter project. Getting Started This project is a starting point for a Flutter a

Oct 27, 2022

A finance app tracking financial inventory.

A finance app tracking financial inventory.

flutter_fintech A Fintech App that keeps track of your personal Finances Getting Started Clone or Fork this project if you're seeking to learn how to

Dec 29, 2022
Owner
Đỗ Trường Thịnh
Đỗ Trường Thịnh
Effortless Cryptocurrency Portfolio Tracker Application Built With Flutter

UNICOIN - DEVFEST HCMC 2021 Effortless Cryptocurrency Portfolio Tracker Application. Unicorn utilizes Coingecko's trusty API to track up-to-date data

null 5 Nov 9, 2022
Flutter Cryptocurrency App with Riverpod & Freezed + Dio for API REST

Flutter Crypto APP Complete Flutter Application with Riverpod & Freezed + Dio for API REST. Features API REST (CryptoWatch) Linear Graph View (Hour, D

Salvador Valverde 312 Jan 2, 2023
A Cryptocurrency app made with Flutter

Cryptoholic A Cryptocurrency app made with Flutter using Provider and BLoC pattern. UI is heavily inspired by this design. You can aquire the current

Karim Elghamry 128 Dec 16, 2022
A cryptocurrency tracker and portfolio app, built with Flutter and Dart

I'm currently rewriting the application from scratch to remove a lot of the ugly code, conform better to modern flutter best practices with regards to

Dominique Rwema Bagirishya 30 Oct 6, 2022
A cryptocurrency, crypto-currency, or crypto is a digital currency designed to work as a medium of exchange through a computer network that is not reliant on any central authority

?? Crypto Trackers ?? Crypto Currency ?? A cryptocurrency, crypto-currency, or crypto is a digital currency designed to work as a medium of exchange t

Prashant Kumar Singh 10 Dec 3, 2022
A cryptocurrency, crypto-currency, or crypto is a digital currency designed to work as a medium of exchange through a computer network that is not reliant on any central authority

A cryptocurrency, crypto-currency, or crypto is a digital currency designed to work as a medium of exchange through a computer network that is not reliant on any central authority

Prashant Kumar Singh 10 Dec 3, 2022
DeFi Scan - Mobile BlockChain Explorer app for cryptocurrency accounts.

DeFi Scan This is the official repository for DeFi Scan - a mobile blockchain explorer built with Dart/Flutter for searching, curating and storing det

Ayodeji Olabisi 4 Dec 20, 2022
A fund tracking application built with Flutter.

Fund Tracker A flutter application for budgets and keeping track of transactions. I built this because I couldn't find any application that allowed a

Andrew An 42 Sep 29, 2022
This is a beautiful stocks tracking app, developed using Flutter.

Stocks Tracker App This is a beautiful stocks tracking app, developed using Flutter. Features Track any stock in BSE Search from any availble stock Be

Hash Studios 8 Dec 27, 2022
Onehour-app - A time tracking app build using Flutter

Onehour A time tracking app build using Flutter Screens First Header Second Header Tech Stack Flutter Flutter Bloc with Hydrated Bloc Firebase Admob F

Fayeed Pawaskar 157 Nov 10, 2022