Flutter系列07: 加密货币钱包（第一部分）

本文制作一个加密货币钱包，设计来源于Pinterest。文章分为两部分，第一部分集中讲设计，后一部分写如何从真实后台的数据流获取数据。

image.png

开始

创建项目并切换目录

flutter create crypto_wallet
cd create crypto_wallet

打开main.dart文件，清空全部内容后增加以下代码：

import 'package:flutter/material.dart';

void main()=>runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Crypto Wallet',
      home: CryptoWallet(),
    );
  }
}

创建CryptoWallet组件。设计包含有四个区域：上部使用gradient渐变背景、文本和图标；底部采用灰色背景，一组产品(portfolio)项和四个按钮stack栈。CryptoWallet返回Scaffold组件，代码如下：

import 'package:flutter/material.dart';

void main()=>runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Crypto Wallet',
      home: CryptoWallet(),
    );
  }
}

class CryptoWallet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

使用Stack组件修改代码如下：

    return Scaffold(
      body: SingleChildScrollView(
        child: Stack(
          children: <Widget>[],
        ),
      ),
    );

SingleChildScrollView组件确保子组件Stack在界面变化（如变小）时可以滚动。

上部区域

image.png

仔细看设计图，上部分和下部分放入Column组件中的两个指定高度的container容器中。
上部分有graident渐变色。Flutter中，container容器组件使用decoration属性来定义gradient渐变、shape形状、color颜色、border边框、blend渲染等。
对于上面部分的container容器，我们使用linear gradient线性渐变，指定中左开始到中右结束点的颜色。然后增加必要的外部间距padding:EdgeInsets.only(top:55,left:20,right:20)，设置Container容器高度MediaQuery.of(context).size.height*0.40(屏幕高度的40%)。

底部区域

底部区域不能直接设置合理的高度和颜色，代码修改如下：

class CryptoWallet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
      child: Stack(
        children: [
          Column(
            children: [
              Container(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [
                        const Color(0xFF81269D),
                        const Color(0xFFEE112D)
                      ],
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight,
                    ),
                  ),
                  height: MediaQuery.of(context).size.height * .40,
                  padding: EdgeInsets.only(top: 55, left: 20, right: 20),
                  ),
              Container(
                height: MediaQuery.of(context).size.height * .75,
                color: Colors.grey,
              ),
            ],
          ),
        ],
      ),
    ));
  }
}

代码运行如下


image.png

在上部代码中增加新的Column子组件。在此之前导入font awesome用来引入需要的图标。打开pubsec.yaml导入以下依赖：

font_awesome_flutter: ^8.2.0

在main.dart里导入

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

Column的最上面组件为Row组件，Row的mainAxisAlignment设置为spaceBetween，children的三个子组件：两个图标和一个文本。实现用两个SizedBox组件间隔两个文件组件，代码修改如下：

 child: Column(children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        IconButton(
                          icon: Icon(
                            Icons.menu,
                            color: Colors.white,
                          ),
                          onPressed: () {},
                        ),
                        Text("投资组合 (24H)",
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 20.0,
                                fontWeight: FontWeight.w500)),
                        IconButton(
                          icon: Icon(
                            FontAwesomeIcons.bell,
                            color: Colors.white,
                          ),
                          onPressed: () {},
                        ),
                      ],
                    ),
                    SizedBox(height: 40),
                    Text("43,729.00",
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 45.0,
                            fontWeight: FontWeight.bold)),
                    SizedBox(height: 20),
                    Text(
                      r"+ $3,157.67 (23%)",
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 18.0,
                          fontWeight: FontWeight.w300),
                    ),
                  ])

保存并刷新应用


image.png

产品(portfolio)项区域

              Container(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [
                        const Color(0xFF81269D),
                        const Color(0xFFEE112D)
                      ],
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight,
                    ),
                  ),
                  height: MediaQuery.of(context).size.height * .40,
                  padding: EdgeInsets.only(top: 55, left: 20, right: 20),
              ),

制作方法cryptoPortfolioItem()进行封装

image.png

card的子组件使用InkWell利用onTap属性进行产品的触发事件。InkWell子组件使用container容器设置padding外间距，color颜色和border边框的radius弧度后加入child子组件。

class cryptoPortfolioItem extends StatelessWidget {
  IconData icon;
  String name;
  double amount;
  double rate;
  String percentage;
  cryptoPortfolioItem(
      this.icon, this.name, this.amount, this.rate, this.percentage);

  @override
  Widget build(BuildContext context) {
    return Card(
        elevation: 1.0,
        child: InkWell(
            onTap: () => print("tapped"),
            child: Container(
                padding: EdgeInsets.only(top: 15.0, bottom: 15.0, right: 15.0),
                height: 100,
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(22.0)),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Padding(
                        padding: EdgeInsets.only(left: 10.0, right: 15.0),
                        child: Icon(icon, color: Colors.grey, size:40)),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(name, style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),),
                                  Text("\$$amount", style: TextStyle(fontSize: 18.0,fontWeight: FontWeight.bold))
                                ],
                              ),
                              SizedBox(height: 20),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Text("$rate BTC", style: TextStyle(fontSize: 15.0,
                                    fontWeight: FontWeight.normal)),
                                  Text("+ $percentage", style: TextStyle(
                                    fontSize: 16.0,
                                    color: Colors.red[500],
                                  ))
                                ],
                              )
                            ],
                          ),
                          flex: 3,
                        )
                  ],
                ),
                )));
  }
}

调用该方法

cryptoPortfolioItem(FontAwesomeIcons.btc, "BTC", 410.80,0.0036, "82.19(92%)"),

在container容器中增加ListView组件显示cryptoPortfolioItem()。

Container(
            alignment: Alignment.topCenter,
            padding: EdgeInsets.only(
                top: MediaQuery.of(context).size.height * .30,
                right: 10.0,
                left: 10.0),
            child: Container(
              height: MediaQuery.of(context).size.height,
              width: MediaQuery.of(context).size.width,
              child: ListView(
                children: [
                  cryptoPortfolioItem(FontAwesomeIcons.btc, "BTC", 410.80,
                      0.0036, "82.19(92%)"),
                  cryptoPortfolioItem(FontAwesomeIcons.ethereum, "ETH", 1089.86,
                      126.0, "13.10(2.3%)"),
                  cryptoPortfolioItem(FontAwesomeIcons.xRay, "XRP", 22998.13,
                      23000, "120(3.6%)"),
                  cryptoPortfolioItem(FontAwesomeIcons.btc, "BTC", 410.80,
                      0.0036, "82.19(92%)"),
                  cryptoPortfolioItem(FontAwesomeIcons.ethereum, "ETH", 1089.86,
                      126.0, "13.10(2.3%)"),
                  cryptoPortfolioItem(FontAwesomeIcons.xRay, "XRP", 22998.13,
                      23000, "120(3.6%)"),
                  cryptoPortfolioItem(FontAwesomeIcons.btc, "BTC", 410.80,
                      0.0036, "82.19(92%)"),
                  cryptoPortfolioItem(FontAwesomeIcons.ethereum, "ETH", 1089.86,
                      126.0, "13.10(2.3%)"),
                  cryptoPortfolioItem(FontAwesomeIcons.xRay, "XRP", 22998.13,
                      23000, "120(3.6%)"),
                ],
              ),
            ),
          ),

保存并刷新应用


image.png

四个按钮区域

使用Positioned组件制作四个按钮，代码如下：

    Positioned(
            bottom: MediaQuery.of(context).size.height * .37,
            left: MediaQuery.of(context).size.width * .05,
            child: RaisedButton(
              padding: EdgeInsets.symmetric(
                vertical: 18.0,
                horizontal: 38.0,
              ),
              color: Color(0xFFEE112D),
              onPressed: () {},
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(25.0)
              ),
              child: Text(
                "发送",
                style: TextStyle(
                  fontSize: 18.0,
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                )
              )
            ),
          ),
           Positioned(
              bottom: MediaQuery.of(context).size.height * .37,
              right: MediaQuery.of(context).size.width * .05,
              child: RaisedButton(
                  padding: EdgeInsets.symmetric(
                    vertical: 18.0,
                    horizontal: 30.0,
                  ),
                  color: Color(0xFFEE112D),
                  onPressed: () {},
                  shape: new RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(25.0)),
                  child: Text(
                    "接收",
                    style: TextStyle(
                      fontSize: 18.0,
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  )),
            ),
            Positioned(
              bottom: MediaQuery.of(context).size.height * .43,
              left: MediaQuery.of(context).size.width * .30,
              child: RaisedButton(
                  padding: EdgeInsets.symmetric(
                    vertical: 18.0,
                    horizontal: 38.0,
                  ),
                  color: Color(0xFFEE112D),
                  onPressed: () {},
                  shape: new RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(25.0)),
                  child: Text(
                    "交易",
                    style: TextStyle(
                      fontSize: 18.0,
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  )),
            ),
            Positioned(
              bottom: MediaQuery.of(context).size.height * .33,
              left: MediaQuery.of(context).size.width * .40,
              child: FloatingActionButton(
                backgroundColor: Colors.white,
                onPressed: null,
                child: Icon(
                  Icons.close,
                  color: Colors.black,
                ),
              ),
            ),

保存并刷新应用


image.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,547评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,399评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,428评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,599评论 1赞 274
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,612评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,577评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,941评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,603评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,852评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,375评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,955评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2赞 342