Before we start, install Flutter and the Flutter editor plugin if you haven’t done so already. The installation should be straight-forward, but if you bump into issues you can leave a comment on this post and I will be glad to help out.
Also, some object-oriented programming (OOP) experience is required. Relax! You don’t need years of experience — if you know what classes and objects are, you should be fine.
On Android Studio or IntelliJ, click on the File menu -> New -> New Flutter Project. If you don’t see the New Flutter Project option, ensure you have installed the Flutter plugin. If you are using Visual Studio Code, follow the steps here to create a new project.
When the page opens, select Flutter Application and click on the Next button.
The next page lets you configure the project. You can use a similar configuration like the image below. Just ensure that the Flutter SDK path points to the directory where you downloaded Flutter.
The last page lets you configure your company domain name, and you can set it to any domain name. After that, click on the Finish button.
The project creation should begin after clicking the finish button, which usually takes a few minutes.
When it’s done, your project should look like this.
A file called
main.dart was created in the
lib folder. It contains code for a demo app. Since we will be building our app from scratch, open up the
main.dart file and delete/clear all the code in it.
If your project includes a
test directory that contains the file
widget_test.dart, delete this file before continuing. It contains tests for the code we just deleted.
Flutter apps are written in the Dart programming language. The
main.dart file is a Dart source file (
.dart extension). The Dart convention is to name source files using
Let’s start writing some Dart code. We will begin with the programming tradition: printing “Hello World!”
To do that we will have to create something called the
main function. The
main function is a top-level function that every Flutter app has that serves as the entry point into your app. Think of it like the entrance to a house.
When you run your app on a device, execution will start from the main function. Let’s create a simple
main function, so enter the following code into your
As you can see, creating the
main function is easy. The second line contains the
main function declaration: its return type(
void) and name (
main). The main function returns
void meaning it returns nothing.
The third line does the printing to the console. We call the
‘string’) or double quotes (
“string”) when declaring a string literal.
To run the code, click on the green run (play) button at the top of Android Studio or IntelliJ. Ensure you have an actual device connected or you have an emulator running.
After the app successfully starts, you should see “Hello World!” printed on the console.
But if you check your device or emulator, you will see something disappointing.
Well, this was expected, as we are currently only printing to the console. There was nothing added to the app UI, and that is why it is blank.
So let’s fix this by adding some elements to the app UI. Our app will be using material design, so let’s add a package to the
main.dart file to help with that.
Just like any modern programming language, you can import a library/package to use in your code. Here we are importing the
material.dart package. This package contains code that helps us create a material styled app.
material.dart package has a function called
runApp takes a widget and attaches it to the screen. Well, what is a widget?
You can think of widgets as views or UI elements. They are the things you see (and some you don’t see) when you run your app on a device. In Flutter, you will be using widgets a lot, because the main idea is that your app UI is made entirely out of widgets.
Flutter already comes with a suite of powerful widgets like text and images. The
material.dart package we just imported has several material design widgets that we will be using shortly.
Let’s use the
runApp method now to show “Hello World!” at the center of the device screen. Replace the content of the
main function with the code below.
Let me explain some of the new stuff in the code above
new: To create an object, you usually use the
newkeyword with a constructor for a class. (OOP)
new MaterialApp(): Here we are creating a new widget object called
MaterialAppwidget creates a number of useful things needed by a material design app.
home:: In Dart, we can clearly state the name of each parameter within the function/constructor call. The widget passed in as the
homeparameter is displayed first when the app is started normally.
new Center(child: new Text('Hello World!')): We wrap the Text widget inside a Center widget so that the text gets centered on the screen. The Text widget is a child of the Center widget. Yes, widgets can be nested.
If you run the code again and open up your device, you should get a slightly better screen now.
Cool! We were able to show an ugly looking text centered on the device screen.
Let’s take a few steps forward now. We will be getting the cryptocurrency prices from the CoinMarketCap API. The API returns a JSON array. Here is a sample response from the API:
We will be making a request to the CoinMarketCap API and decoding the JSON from the app. We will have to include a couple of new packages to the
Here’s an overview of the new packages:
dart:async: Provides the
Futureclass, which I will talk more about below.
dart:convert: Provides the
jsonvariable we will use to decode the JSON string response.
package:http/http.dart: Provides the function we will use to make HTTP GET requests.
Let’s add a new function to the
main.dart file that makes a request to the CoinMarketCap API.
Let’s walk through the new code
Future<List> : We are basically saying tha
t the getCurrencies() function will ret
urn a List sometime in the future. It will make an HTTP request to the CoinMarketCap API and ret
urn a List of currencies when done.
Promises. I created the images below to help you understand
Futures in Dart.
async and await :
Await expressions let you write asynchronous code almost as if it were synchronous. The
http.get(url) function is asynchronous, returning a
Future<Response> immediately when it’s called. We want to wait fo
r the Response so we can decode the JSON string, but we also don’t want to use ugly callbacks.
await expression evaluates
http.get(url), and then suspends the currently running function (
getCurrencies()) until the result is ready — that is, until the Future has completed.
await, the code must be in a function marked as asynchronous. An
async function is a function whose body is marked with an
async modifier. When you call an
async function, it immediately returns a Future. The body of the function is scheduled for execution later.
You can read more about
await in Dart here.
http.get(url) : Makes a HTTP GET request to the CoinMarketCap API. This function is asynchronous and returns a Future immediately.
JSON.decode(response.body): Decodes the JSON string response.
Let’s test the
getCurrencies() function we just created. We do that by making a call to it in our
main function and printing the returned value to the console.
If you run the code above, you should see the API response printed to the console.
Well, in the real world bad things can happen. For example, you might not be connected to the internet, so the request to the CoinMarketCap API will fail. For this tutorial, we will assume we are in Wakanda.
In a production app, you will have to handle network failure. You do that by putting the HTTP call in a
Now that we have a list of currencies, let’s go ahead to build the UI to show that list.
When writing Flutter apps, you’ll usually create new widget classes. A widget’s main job is to implement a
build function, which describes the widget in terms of other, lower-level widgets.
Let’s create a new Widget called CryptoListWidget. Add the code below to the bottom of your
Let’s walk through the new code above:
StatelessWidget: You will usually create Widgets that are subclasses of either
StatefulWidget, depending on whether your widget manages any state. We are using
StatelessWidgetbecause we have our data already and we won’t be updating it in this tutorial.
final List<MaterialColor> _colors : Variables
in a StatelessWidget shou
ld befinal (meaning they are constant or do not change). Here we are declar
ing afinal variable that holds a li
st of MaterialColors. The unders
core (_) before the variable name makes it private (inaccessible from other classes).
CryptoListWidget(this._currencies): This is the constructor for our widget. It assigns the list of currencies we pass into the constructor to the
buildfunction: The build method returns a lower-level Widget (
Text) that describes how it will look.
Let’s replace the Text widget in the
build function above with a new widget called
Scaffold widget implements the basic material design visual layout structure. Replace the
build function above with the one below.
The Scaffold class provides APIs for showing drawers, floating an action button, bottom bar, snack bar, and so on. We will be adding a floating action button later.
You should get a warning that
_buildBody() isn’t defined for the class
CryptoListWidget. Let’s go ahead to create
_buildBody() function inside of the
The syntax here should be familiar. We are using two new Widgets:
[Container](https://docs.flutter.io/flutter/widgets/Container-class.html)widget is just a container :) (for other widgets).
[Column](https://docs.flutter.io/flutter/widgets/Column-class.html)widget layouts a list of child widgets in the vertical direction. It has a parameter called
childrenthat takes a list of widgets.
Let’s create the two functions we called in the
_buildBody() function. The first one is
This function returns a regular
Text widget with a style that makes it bold and white with a font size of 24.0.
The text is going to look like this when we run the app.
We can’t run the app yet because we haven’t created the other function called
_getListViewWidget(). Let’s quickly create it using the code below.
_getListViewWidget() returns a
ListView widget that is wrapped in a
Flexible widget. We use the
ListView.builder to easily create the list. We pass in an
itemCount which tells the builder how many currencies to show.
itemBuilder callback will be called for each item and you have to return a new widget. In the code above we are calling a function called
_getListItemWidget() that returns a Widget.
Before we create the
_getListItemWidget() function, let’s quickly create the individual elements for the ListView item widget. We want each item in the ListView to look like this:
So, we have three main widgets:
Let’s create the widgets. For simplicity sake, I created a function for each of them. The first function called
_getLeadingWidget() returns the round icon with the text.
The widget will look like this:
The second function called
_getTitleWidget returns the
Text widget for the currency name.
The third function called _getSubtitleWidget() returns the
Text widget for the currency current price and percent change in 1 hour.
Both of these widgets should look like this:
Let’s wrap all three widgets in something called a
ListTile widget. The
ListTile widget is based on the Material Design List documentation. It shows all three widgets in this style.
We will create a new function called
_getListTile that returns a
Finally, let’s create the
_getListItemWidget() . It is going to return a
Container widget that has a top padding of 5.0 and has a
Card widget child. The card widget has the
ListTile returned by
_getListTile as it’s child.
The widget will look like this.
We have successfully completed our
CryptoListWidget. But we have to update the
main function to show the newly created widget instead of the
That’s it. You can hit the run button again. If everything works well and you are connected to the internet, you should a screen that looks like this.
Really cool right?
The app you see will be slightly different from the screenshot above:
I decided not to include them in the tutorial. But you can check the project Github repository to see how I was able to achieve it.
The completed app can be downloaded here.
Thanks for reading and hope you enjoy Flutter as much as I do. Feel free to leave a comment below if you have any issues, suggestions, etc.
If you enjoyed this story, please click the 👏 button and share to help others find it.