🤠👊Creating a Flutter App for Chuck in 10 minutes

11 min readSep 16, 2021

On in this article we are going to create a Flutter application in which we are going to consume an API. Although I would like to warn you that it is not going to be just any API, but that we are going to use the famous Chuck Norris API.

You already know that Chuck is dangerous, even with his hands in his pockets!

And since we don’t want to wake up the beast in this article, you don’t need to worry, as we have spoken with Chuck and we have his approval.

So, with Chuck’s permission, let’s get started!

📌Preparing the app Layout

Although my intention is not to make a super — application that looks perfect on all platforms: web, mobile and desktop … Let’s try to do something that is decent and we’re going to focus primarily on the Mobile version of Android.

The end result of our ChuckApp interface is to create an app that looks like the following:

If you look at our future App it will be made up of a Chuck background, and just above this, where we load the Widgets of our application. Although there will not be many, we will have a phrase that will be consumed from the Chuck API together with a button that will allow us to make a new request to the API that will modify the current phrase.

The code of our interface will be:

Mainly the interface stand out for:

We have given preference to the side view (landscape) for mobile.

Therefore, if we load the app on a mobile device, the following view will be opened directly:

We have hidden the upper notification bar (notification bar) and partially modified the lower system navigation bar (navigation system bar) so that instead of showing the bar as follows:

It looks like this:

At the moment if we click on the button, we can see that a message appears in the Debug console:

And finally, we have loaded the background of our app from a URL path of an internet image.

To make sure that our app gives priority to the side view on smartphones, we have to add some settings. In the AndroidManifest.xml located in android / app / src / AndroidManifest.xml we will write the following:

This change is exclusive for Android, if you want to make a compiler for an Apple mobile it is necessary to use a Mac and since I don’t have it, I can’t program for iOS. Although knowing the command is not Android, it will not be very difficult to find its equivalent for iOs devices.

If we look if we modify the URL of our application for the other one that I have left commented:

We can see that our application can change the background of the App very easily:

CORS issues

The use of CORS, on some pages, prevents us from using externally sourced resources within a Flutter application. You can find out if the image is blocked by CORS by opening the Chrome inspector console (to open the inspector, press F12) and if the resource we are using is from a website that controls CORS, and we are compiling for Web os a window like the following may appear:

Although we could use an image if we do the following:

flutter run -d chrome --web-renderer html // run app

flutter build web --web-renderer html --release // production build

Let’s see it:

And we see that now we are using an image that prevented CORS:

Perfect, because with the interface of our app developed we are going to start with the API.

📌 Exploring the Chuck Norris API

Chuck’s API is a REST API, that is, it uses the HTTP protocol to call end points (URL routes). Through which we will communicate with the server in order to obtain the resources that it serves us.

In order to work with an API, we must first explore the API. And see what are the endpoints we are going to consume.

In our case, we are only going to consume one end point, which will be the following:

An example of a response to our request will be the following:

In fact, if we go to the browser and make a request, we can see that we receive a very similar response:

The APIs are mainly intended to communicate between two applications and therefore do not have a design that stands out for its beauty or elegance. Despite this, we can “present” said response somewhat better if we use a plugin in our browser such as:

If we make the request again, we can see that the result improves its presentation in part:

Although this is done internally by the plugin that we just installed since the response we receive from the API is the same as the one we have seen previously.

📌Adding an icon to the logo of our application

If we look at the API, when we launch the request we can see that we have the icon_url.

If we open the URL with the browser, we can see that we have the following icon and we save it for the moment on the desktop to be the future icon of our application:

What we are going to do is make it the icon of the application, for when we run it from the mobile:

To do this, we are going to use the flutter_launcher_icons package, in order to work with it we must add it to pubspec.yaml. One way to do it is by executing the following command:

flutter pub add flutter_launcher_icons

Which if you look at it adds the dependency in the pubspec.yaml and downloads and installs the dependency so that we can work from our project:

By default, our dependency will be installed in dependencies:

Once the dependency has been added, we are going to right-click on the directory of our project in order to add the icon in said directory:

Once the directory is open, we paste the icon inside:

And we refresh the directory to make sure it shows up in our file explorer:

Once we have the icon added we are going to move the dependency to dev_dependencies and we are going to put the path where we have the icon located:

It‘s very important that you pay attention to the tabulations that we are making since if you do not respect these indentations it will not work correctly. To help you see them better I have marked them with two lines of different colors. We have also put the dependency in test and not in the normal dependencies, since we only need it during development so our application will be lighter when we package it for publication.

To continue, only, we have to execute the following command:

flutter pub add flutter_launcher_icons

And finally to change the icon we must execute the following:

If we now go to the mobile view, we can see that the icon has been changed correctly:

📌Changing the application name

In addition, we are going to change the name of the app to ChuckApp since although we have changed the icon, the name of the application does not look pretty.

To do this, we are going to install the flutter_launcher_name package using the command:

flutter pub add flutter_launcher_name

Although in this particular case we see that we have a problem with the packages we are working with:

We can lower the version of flutter_launcher_icons, to a version that is compatible with version 2.1.16 of yaml to avoid this error. To do this, we go to the official website of the package.

In our case, we are going to downgrade the flutter_launcher_icons package to version: 0.7.2

Which will allow us to install the dependency without problem:

And once the dependency is installed, we are going to move it to test and modify the name of the application as follows:

And we already have the name of our application changed, so let’s continue!

📌Configuring the HTTP library to consume a Flutter API

Once we have the Layout of our application ready and we know the API that we are going to consume, we are going to prepare our app so that it can consume an API.

To make calls to an API, Flutter provides us with an excellent library that will allow us to make calls to our REST APIs in a simple way thanks to the fact that it provides us with a series of high-level methods.

To do this, we will use high-level methods. We specifically only one and it will be the method:

read : it will ask the end point (URL) to specify a request (request) through a GET type HTTP request. We use this type and not another because we only want to receive data and we do not have to send information to receive said data. Therefore, for a situation like this, it is usual for us to use read. When we make a request, the response will be provided inside a Future <String>.

In order to use this library (http) we have to import the http dependency.

To do this, we are going to execute:

flutter pub add http

In this case, we will leave the dependency in the dependencies section, therefore, we will not have to do anything else:

📌Giving internet permission for Android mobiles

To avoid having problems if we compile for mobile for Android, we must grant the internet permission that will allow us to grant permissions to the application to connect to the internet:

<!-- Required to fetch data from the internet. -->
<uses-permission android:name="android.permission.INTERNET" />

To grant this permission, we go to the AndroidManifest.xml file found inside android / app / src / main / AndroidManifest.xml and paste said permission:

Importing the library to be able to work with the library in Dart classes

And finally, once the library is imported, in order to use it within the classes of our application, we must import the library in the main.dart file :

import 'package:http/http.dart';

If we look when we import the HTTP library, we can see that a lower blue line appears at the bottom of the import. If we hover over it with the cursor, we can see that a message appears informing us that it does not make much sense to import a library that we are not using yet:

Therefore, we are going to use this library!

📌Consuming an API with the Flutter HTTP library

Well, we have everything ready, now we are finally going to see an example of how to consume our API:

In order to map the data we receive in the JSON to objects, we have to create an object:

The code of the chuck.dart file will be the following:

Finally, before combining the interface with the code of the API call, let’s see the example just to make it easier to understand:

If we run the application and the API responds correctly, we can see that initially and for a very short time it shows us a CircularProgressIndicator:

And finally, in principle after a few milliseconds, it shows us the phrase:

If we modify the API route making the route invalid, we see that we get an Exception:

We can see from the browser itself that it is not a page that has an end point:

If we move forward, we can see that it first shows us an exception with an HTTP 404 code (Not found) since it is not able to make the request to an end point that does not exist:

And later, if we continue the execution:

We see that it appears in the same message on our device:

📌Adding the Layout to our API call

If we combine the interface that we have made previously, with the API call that we have just made and we accompany it with some slight modifications, the code will be as follows:

And now we can see the final result and how the phrases are modified when we click on the button to load a phrase: