Unparalleled suite of productivity-boosting Web APIs & cloud-based micro-service applications for developers and companies of any size.

API

Working with APIs in Flutter

It is very quick and simple to develop a mobile application using Flutter. In this article, we will create an application with a working API on Flutter.

Most of the data on mobile platforms comes from different sources through endpoints. Mobile platforms make their actions according to this incoming data. In this article, we will get to know Flutter, an open source mobile application development SDK developed by Google, and then work with an API on Flutter.

What is Flutter

Flutter is a free and open-source mobile UI framework created by Google and released in May 2017 that you can use to develop mobile, web, and desktop applications.

Flutter is cross-platform, it enables both IOS and Android based applications to be developed using the same codebase.

Why Flutter

  • Flutter is a system that is easy to learn and can be used practically. So with flutter, you can easily create your mobile applications in a modern framework.
  • With Flutter, you can change codes quickly. In this way, you can see the results with a click. When you make very important changes, you do not need to take time-consuming actions such as reloading.
  • It is very cheap to develop a mobile application using Flutter. Developing and maintaining mobile apps for both Android and IOS can be costly.
  • Native applications are always preferred for high performance in mobile application development. However, it is difficult to see a difference between the flutter app and native apps in terms of performance.
  • You can use the widgets offered by Flutter without difficulty. In this way, you can offer a high-quality user interface with a high user experience and personalize your mobile application as you wish.

Are you doing Windows Development?

One of the best solutions for Windows development is Embarcadero Delphi. Delphi is the original IDE for building single-source multi-platform native apps with powerful visual design features and best-in-class Windows integration and up to 5x productivity gains. In addition to Windows, Delphi also supports Android, iOS, macOS, and Linux with a single codebase and single UI. It is part of RAD Studio which also includes C++Builder for Windows development. C++Builder is advanced IDE for modern C++ with high-productivity libraries that enable developers to deliver blazingly fast native apps with great user experience on Windows and iOS.

Creating a Boilerplate Application

In this section, we will create an application with a working API on Flutter.

Create Project

First, let’s create our sample project by running the command below.

Let’s edit the default codes according to our own project.

File: main.dart

Include the HTTP Package

After creating our project, let’s include the HTTP package in the “pubspec.yaml” file so that we can bring our data via HTTP.

File: pubspec.yaml

After defining the necessary packages to the project, let’s import the http package to our Main.dart file.

Create Model

We will work with sample JSON data in our project. Yugioh data will be used for this application. (https://raw.githubusercontent.com/KianBennett/Yugioh-Database-Downloader/master/cards.json)

We are bringing our Yugioh data in JSON format to a format to be used in Flutter using the https://app.quicktype.io/ site. Then we open the “Models” folder in the directory of our project and open a file named “Yugioh.dart” into it and copy the codes we brought to the Flutter format here.

code editor

Create Homepage

Now, when we want to use a field in our model class, we can create an object from this class and pull the relevant field.

In this step, we will take the necessary steps in the “main.dart” file.

File: main.dart

We created a method called getCards of type future. In this method, we first said that we will request a get to our Url address. There are String statements in our request. We specified that we will take the body part of the string expression that comes with Json.decode and assign it to the variable named responseBody. So we converted the body part of the incoming String expression to the JSON object.

We used the Yugioh.from JSON method to create a Yugioh object from the JSON object. This method allows us to create an object from the Yugioh class using the incoming JSON object.

File: main.dart

Let’s create our script and define a Future builder in the body part. In the future feature of the future builder widget, we will define our getCards method, which will take a long time. We will create our main structure in the Builder section. First, let’s carry out our checks on connection.

After this step, after making a small design, we will pull some of the Yugioh class and place them on the page.

Copy the following codes to the “else if” code block we just added.

File: main.dart

I used the imageUrl in the Yugioh class and preferred to use Gridview for viewing. I chose to use Inkwell to give cards clicks. I mentioned that the Inkwell widget should redirect the onTap feature to the yugiohDetail page. When we run the codes, we will get the following output.

app screenshot
app screenshot

Create Detail Page

Let’s create a structure that will display the properties of the relevant card when clicking on any card on this page.

Let’s create a file named “yugiohDetail.dart” in the project directory and paste the following codes into this file.

File: yugiohDetail.dart

On this page I created, I created a constructive method to bring the Yugioh card clicked first. We will use the Stack structure in the Body part. We will create a Card Widget in the middle of the page, insert the image of the relevant Yugioh card at the top of this Widget, and print the information of the relevant card in the Card Widget.

app card detail page

Let’s continue by pasting the following codes into the “yugiohDetail.dart” file.

File: yugiohDetail.dart

In the Card Widget, we showed the “name” of the card in our Cards class, the “property” of the card, the “lore” value where the information about the card is kept, and the “type” properties of the card.

We showed the image of the corresponding Yugioh card using the Align Widget.

Let’s see how the application works.

app card detail page
app card detail page
app card detail page

Conclusion

In this article, we worked with APIs on Flutter. Quite simply, we have developed a Yugioh Card application with the data received by sending a request to an endpoint via the HTTP package. You can find more information about Flutter in its official document (https://flutter.dev/).

Related posts
APIFinance

How to Integrate Stock Market Data Into Your App With the Best Stock API

APICurrencyFinanceLocationPython

How to Improve User Experience With API Integration

API

5 Best Use Cases of API Integration

APIAutomation

API Testing Tutorial: What Is API Automation Testing?

Leave a Reply

Your email address will not be published. Required fields are marked *