Building a UI with flutter — lesson 01

Lesson 2: https://medium.com/@danieln.llewellyn/building-a-flutter-ui-lesson-02-adding-images-fda8a8ac5609

Today we’re going to begin a journey into building a UI with flutter. For the purpose of this series of articles I’m going to focus on building a UI to display a cryptocurrency wallet, with a user’s ‘account’ details.

Code

https://github.com/dllewellyn/crypto_currency_wallet/tree/LESSON_1

Watch

With a new project created either in Android studio or using this command

flutter create --project-name cryptocurrency_wallet

clear down your ‘main.dart’ file so you have something like this

Let’s walk through some of the main components here. A scaffold is what builds the basic UI structure. Without it, our hello world text would just be on a black background at the top right of the screen

An app bar is just that, an app bar at the top of the screen. In our case it’s red because we’ve set the Swatch colour to red.

The 'body' of the scaffold is set to a Text, which is our text widget — in the time honoured tradition of our people, says hello world.

Some account data

Create a new file called account_data and paste the following code into it

This file has two classes, one is a list of account data, another is some account data. At the bottom is also a function to get some dummy data, which we can call like this:

import 'package:crypto_currency_wallet/account/account_data.dart';
mockAccount()

For the first tutorials, we’re going to focus on building a UI — in a future series we’ll learn how to retrieve this information from the internet. For now, take it as a starting point that we already have some data.

And now the fun really begins

We’re going to now create our first real widget. The widget is going to display our account data as a ‘card’

First, create a new widget. You can either do this in main.dart, or in a new file and import it. For a full example see:

dllewellyn/crypto_currency_wallet

Hint in android studio you can start typing stless and hit autocomplete to generate a new stateless widget

class AccountListItem extends StatelessWidget {
  final AccountData accountData;   
  const AccountListItem({Key key, this.accountData}) : super(key: key);
    @override Widget build(BuildContext context) {
       return Text("Hello world");
    }
}

Change your scaffold body to

Scaffold(      
    appBar: AppBar(),      
    body: AccountListItem(accountData: mockAccount())
);

What we’re doing here is creating a widget which takes an AccountData object. For now, we’re ignoring the widget, and just returning Hello World. Re-run your app and check what you get.

Hint: By default in Android studio your app will reload automatically when saving a .dart file. This is known as ‘hot reloading’

Let’s return some data from the account object just to prove it’s really doing something

class AccountListItem extends StatelessWidget {
  final AccountData accountData;
const AccountListItem({Key key, this.accountData}) : super(key: key);
@override Widget build(BuildContext context) {
       return Text(accountData.name);
    }
}

This should show ‘Bitcoin’ on the screen.

Now, let’s start by getting a UI which has the ‘name’ (E.g. bitcoin) on the first line, and the ‘id’ e.g. BTC showing one after another.

Foundations

The foundations of a flutter app is widgets, but two widgets in particular are key

Row

Column

These two widgets are the easiest way to build a UI horizontally and vertically.

Back to our example, create a new widget. I like to create a ‘widgets’ folder and put new widgets in there. I’ve called mine ‘account_title.dart’

Since what we want is to show the name on the first line, and then the id on the next line we can use a column. Like so:

Here you’ll notice we’ve created a new widget. Within the widget we have aligned to ‘start’ try playing with this, change it to e.g. end and have a look at the result.

Head back to main.dart and change to this:

class AccountListItem extends StatelessWidget {
  final AccountData accountData;
const AccountListItem({Key key, this.accountData}) : super(key: key);
@override Widget build(BuildContext context) {
       return AccountTitle(accountData.currencyValue);
    }
}

Another thing we’ve got in our account title is the ‘@required’ tag which will throw an error if the supportedCurrency is not passed in.

We’re going to add another simple widget now to show the balance

Now, this time we want to display our first widget — the title widget on the right, and next to that we want our balance widget

class AccountListItem extends StatelessWidget {
  final AccountData accountData;
const AccountListItem({Key key, this.accountData}) : super(key: key);
@override Widget build(BuildContext context) {
       return Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children:[
            AccountTitle(accountData.currencyValue),
            BalanceWidget(accountData.balance)
        ];
    }
}

You’ll have noticed I suspect that they’re a bit squashed

class AccountListItem extends StatelessWidget {
  final AccountData accountData;
const AccountListItem({Key key, this.accountData}) : super(key: key);
@override Widget build(BuildContext context) {
       return Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children:[
            AccountTitle(accountData.currencyValue),
            Spacer(), 
            BalanceWidget(accountData.balance)
];
    }
}

And finally, we’ll add a bit of padding, fairly self explanatory

Thanks for reading, let me know if you have any feedback. Future lessons coming soon