Following my commitment to publishing an app ui everyday, I found this beautiful Crypto Currency design on dribbble.

Let’s turn it into a flutter app!

Before we start go get the source code: Download.

Then pay a tip:

options Option 1 $1.00 USD Option 2 $5.99 USD Option 3 $10.00 USD

Let’s start with the login screen as it’s the easiest one, the screen is simply a full screen column with a logo on top, custom InputFields, and a CupertinoSwitch.

First I wrote the Custom Input Field code as follows:

class CustomInputField extends StatelessWidget { final String label, hint; final bool hasIcon; final Icon icon; const CustomInputField({ Key key, this.label, this.hint, this.hasIcon, this.icon, }) : super(key: key); @override Widget build(BuildContext context) { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( label, style: Theme.of(context).textTheme.subhead, ), SizedBox( height: 5.0, ), Container( decoration: BoxDecoration( border: Border.all(color: Colors.white), ), padding: EdgeInsets.symmetric(horizontal: 15.0), child: Row( children: <Widget>[ Expanded( child: TextField( decoration: InputDecoration( border: InputBorder.none, hintText: hint, hintStyle: TextStyle(color: Colors.white), ), style: TextStyle(color: Colors.white), obscureText: true, ), ), hasIcon ? IconButton( icon: icon, onPressed: () {}, ) : Container(), ], ), ), ], ); } }

This widget is just a Row inside a container that has a border decoration. I used a row because I wanted to have an IconButton to toggle the TextField obscure text parameter.

after that it’s just a matter of adding few Text widgets, and the Cupertino switch.

Now let’s get into the serious work!

The home screen shows our current balance as well as all of our tokens such as Ethereum, Bitcoin, LightCoin, etc…

To build this screen I first created the top part with a container, dropdownbuttons, a few Text widgets and dividers.

Then I created a widget for a single crypto currency token card as follow:

class TokenCard extends StatelessWidget { final String token, name, cryptoAmount, cryptoCurrency, usdAmount, cryptoIconURL; TokenCard( {Key key, this.token, this.name, this.cryptoAmount, this.cryptoCurrency, this.usdAmount, this.cryptoIconURL}) : super(key: key); @override Widget build(BuildContext context) { return Container( margin: EdgeInsets.symmetric(vertical: 9.0, horizontal: 21.0), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(15.0), ), padding: EdgeInsets.all(21), child: Container( width: double.infinity, child: Row( children: <Widget>[ Flexible( flex: 1, child: Image.network( cryptoIconURL, ), ), SizedBox( width: 10, ), Flexible( flex: 3, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( token, overflow: TextOverflow.ellipsis, softWrap: false, ), Text( name, style: Theme.of(context).textTheme.subhead, ), ], ), ), SizedBox( width: 10, ), Flexible( flex: 2, child: Column( children: <Widget>[ Text( "$cryptoAmount $cryptoCurrency", overflow: TextOverflow.ellipsis, softWrap: false, ), Text( "\$$usdAmount", style: Theme.of(context).textTheme.subhead, overflow: TextOverflow.ellipsis, softWrap: false, ), ], ), ), ], ), ), ); } }

With that done I arranged the two parts using a Stack and I put the Token card inside a ListView and Voila!

Please tell me what you think about this post in the comment section below!