If there is one technology that’s literally giving me goosebumps, it’s Flutter. One language for all platforms: desktop, web, iOS and Android. Google has really done something incredible creating this. I strongly believe this tech will take over and really soon if it hasn’t already since its inception around two years ago.

OMG, Flutter!!

I wanted to cover a few things in this article so anyone getting started with Flutter can get going quickly and easily with their API network calls on your projects.

We’ll be creating a small fun Chuck Norris facts app in Flutter using this endpoint. I will be covering these items below in the tutorial:

BLOC Architecture and Project setup

API calls setup

Repos and BLOCS

UI

Ok - let’s dive straight into it.

BLOC Architecture and Project setup:

So the basic architecture pattern that is replacing MVVM for Flutter is BLOC. They are almost identical except what the BLOC pattern gives you is a data stream that can be updated by adding new data through streams instead of the ViewModel - data flows from the BLOC to the UI or vice-versa in the form of these streams. There is an awesome introduction to streams here.

BLOC Architecture

Let’s hope you’ve already done a few Flutter projects and have a bit of a handle on it. Using your favourite IDE, either Visual Studio or Android Studio, start your new project (you can also do this via the terminal flutter create apiCallsBoss).

flutter create apicallsboss

My personal preference is Android Studio. So just go ahead and create a new Flutter project in Android Studio and name it whatever your heart desires. I’ll call it “apicallsboss”.

After you’ve created your project we’ll need to setup our packages:

Name them “blocs”, “models”, “networking”, “repository” and “view” as shown below. All of them are pretty self-explanatory about what classes they’ll be holding and it’ll become more clearer as we get deeper into it. I suggest using this architecture for all your new Flutter projects as you’ll be able to separate and manage all your business logic properly and easily.

Package Structure

Next let’s add our dependencies. For this project all we are going to need is our http library for our network calls. Open the pubspec.yaml file and plugin

http: ^0.12.0+1 like so:

Finally run flutter packages get or do a “packages get” in Android Studio.