This episode of Flutter Thursday will focus on making a crypto wallet design from Pinterest. I will make this a two-part series, with the first part focusing on the design and the last part on how to stream data from a real streaming backend.

Getting started

flutter create crypto_wallet

cd create crypto_wallet

Open main.dart file, delete everything and include the following

We will need to create the CryptoWallet widget. Before that let’s look at the design again. It has four main sections: The upper section with a gradient, some text and icons; the bottom section with a grey background, the list of portfolio items and the section with four buttons stacking on to the list.

Create the CryptoWallet widget. Basically, it returns a Scaffold widget.

We will place each of the sections on top the other using the Stack widget. So amend your code to look like this:

The SingleChildScrollView widget ensures that the child Stack will still be scrollable when the phone viewpoint, for example, gets too small.

The upper section

Looking closely at the design the upper and bottom sections will fit in a Column widget. We just need to specify the height for each and each will be a container.

The upper section has a gradient. In flutter, a container has a decoration property where you can define the gradient, shape, color, border, blend mode etc of the container.

For the upper container, we will use a linear gradient, specify the colors and the set the begin and end point to center left and center right respectively. Please read this cheat sheet article if you like to learn more about Flutter gradients and box decoration in general. Then we added padding: EdgeInsets.only(top: 55, left: 20, right: 20) to create the necessary padding for the child widget we will add later. Also, we set the height of the Container to MediaQuery.of(context).size.height * 0.40 (we are setting container size to 60% of the current media i.e your phone window containing your app)

The bottom section

The bottom section has nothing really safe the height and color set to MediaQuery.of(context).size.height * 0.60 and grey respectively. Below are the changes to the file

Now hit refresh and your app should look like this:

OK. Looking good. Let’s move over to the content of the upper container. We will add a new child Column widget

Before that include font awesome for some required icons. Open pubsec.yaml and include the following dependencies:

font_awesome_flutter: ^8.2.0

Also, include this import in main.dart file

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

Next, add some children widgets to the column. The topmost part will be a Row, with a mainAxislAlignment set to spaceBetween, with three children widgets: two Icon buttons and a Text widget.

Then, we will add two SizedBox widgets between the remaining two Text widgets. See the changes below

Save your changes and hit refresh

The portfolio items section

Next the portfolio items section

Let's make a method that will render a cryptoPortfolioItem()

Crypto Portfolio Item

We employ the use of a card widget with an InkWell child so as to take advantage of onTap property just in case you want to trigger some sort of action on the portfolio item. The Inkwell takes a child container, nothing special here we will set the padding, color and border radius of the container and add a child.

Where it gets interesting, so we can call it like this:

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

Next, we will add a ListView widget to the container above to display each of the cryptoPortfolioItem().

Save your changes and hit refresh

The section with four buttons

Okay, We are going to “cheat” our way through here 😀😀😀. It will probably break under a different orientation. I will make a fix in part two of this article

We will make four buttons using the Positioned Widget and try to position them on the screen. Here is the code

Save your changes and hit refresh

Ok. That is the look so far. Still some edges to be fixed. We will look at those in part two.

You can find the source code here: https://github.com/shubie/A-crypto-wallet-part-one-

Thank you for reading this far. Let me know if you find errors, typos or better ways to do this. You can hit me up on Twitter @afegbuas

Keep fluttery!!!