CoiCoin Cryto Tracker – 演示产品

这是一个基本的加密货币价格跟踪应用程序，是 2021年Google DevFest HCMC上的演示产品。2021年Google DevFest HCMC是一个关于Flutter的特别培训课程，旨在帮助您提升构建真实应用程序前端的知识。

概述

课程

通过培训课程，DevFest-ers应该能够：

  • 熟悉Dart编程语言。
  • 了解Flutter中的布局、导航和主题。
  • 管理Flutter中的状态
  • 构建Flutter应用程序并进行测试。

照片

  • Logo

Logo

  • 应用视图



过程

使用...构建

  • Dart
  • 来自Flutter Material和Package的颜色、图标、信用卡滑块
  • 来自CoinMarketCap的Cryto API

我们学到了什么

完成项目后，我们可以构建一个侧边栏菜单，一个信用卡和一个使用Cryto API实时自动更新的数据。

  • 侧边栏菜单

@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'),
          ],
    ));
  }
  • 信用卡。

  @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 API。

  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");
    }
  }

如何运行

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

贡献者

GitHub

查看 Github