API Integration in Flutter using DhiWise!

Hello Developers! It seems you aren’t having fun with static data, right? If that’s the case, let’s start integrating real-time data with the app of your choice. We can achieve this with API(Application Programming Interface). Sounds way too complex? But wait, let me tell you, this is damn easy using DhiWise.💁‍♀️

Good news, folks, DhiWise allows easy and quick “API Integration.”😍

Let’s dig deeper and see what that means:

Application Programming Interface is a set of code that allows data transmission between one product/service to another. You can say it’s a connection between two services/products. (consider it as the waiter that connects clients to the kitchen in a restaurant)

APIs can be private, public, or partner. Private APIs are available only for in-house developers within an organization, whereas public APIs are available for third-party developers too. (Exactly how one app can connect with any other to request info).

And that is where DhiWise comes bearing good news:

DhiWise enables us with the following Integrations:

1)Built-In API Integrations.

2)Custom API Integrations.

Both of these are easy to get started with! If you’re a beginner using DhiWise, I would suggest you to first check out the integration of built-in APIs. So, here we go!!

1)Built-In API Integration

In simple words, this functionality lets you use a pre-existing API module.

-Firstly, let’s create a new Flutter application with DhiWise. DhiWise gives us wide flexibility in uploading our Figma designs or selecting their templates.

• From the Dashboard menu on the left, select “API Integration.”

• This will open up with the list of built-in APIs. Let’s take an example of a login API.

• Now, select a login API and hit the API to check out the response.

• Since this opened up in a new tab, go back to the previous tab, “Screens” from the menu on the left.
• To integrate a built-in Login API that DhiWise provides ,click the “Configure” button on login screen.

• To integrate a login API with the click of a sign-In button and navigate it on success, click the sign-in button on the screen and select “Create Action”.

• Select “API Integration” from the tab beside it.

• This opens up with a Step by Step setup. In Step1:-Select your login API from the dropdown.

• Go to Body. Select key as username. Now, select type as View. (As you want to read the value from the textbox). From the Designing Screen, select the text widget with which you want to bind.

• Do the same for the password and click on “Next” to proceed to the next step.

• In Step 2:- Select the key that you might need inside your application. For example, I require email and username once my user is logged In.
• “Select Key” from the dropdown.
• Since the username and email key are inside the data object, click on “+” of Data and select username.
• Now, select type as “Save to Preferences” and Key Name as “user.” (This is the name to access username further in an app). Do the same for email and click on Next.

• In Step3:- Select the action for success on an API call from the dropdown. Navigate to the dashboard screen.
• To pass the data between the screens, use “add arguments”. To add an argument, click on “Add Argument”.
• One can set the key, for example, the username (display the username on the dashboard).
• Since the username and email are set as a response, select “Argument Type” as “API Response.”
• Thereafter, select the respective API from the dropdown below and your response. (response which is a username, is in the data object. Therefore, select username from Data).
• Click “Select” on the top right. This will take us back to the Step 3 tab. Now, handle the action to be performed “On Error.”

Here, from the dropdown, select “Show Alert” since I want to toast a Message. This will open up a “Show Alert” tab. Well, select the “Toast” option and Enter the Error Message to be displayed. Let’s “Save” to proceed further.

Now our API is ready to be Integrated! So, “Submit” it, and here we are! Whoa, Our API is integrated!🥳

Let’s now “Build app” and test it!!

2) Custom API Integration

• After creating your Flutter application with DhiWise, select “API Integration” from the Dashboard menu on the left -> Select “Add New API”.
• To add a new API: -> select “Add new API” from the “Create an API” block.
• This will open up in a new window. Now, paste the API, select the method (GET, POST, PUT, PATCH, DELETE, etc.), add the required parameters, body, and headers, and hit the API to check our JSON Response. Whoa, it’s working fine!

• Let’s go back to our tab. In the search bar, let’s search our API, and here we are. We got our newly added API in the List.

• Navigate to “Screens” from the left Dashboard menu. Click the “Configure” button for the screen where you want to integrate your API.

• To display data as a list, go to the lifecycle tab on the top right. It has a OnReady() method (This method is called 1 frame after onInit()). On Ready provides a “Select Action” dropdown. Select “API Integration.”

In Step1:-Select an API from the list of APIs in the dropdown and click on “Next.”

In Step 2:- “Select Key” from the dropdown. Firstly, we will need the entire response; therefore, select my key as ”Response” and select the View from the designing screen (Concerning the entire response binding area).

• To bind email, gender, and status fields with a specific component on the screen, select the above keys to bind one by one.
• Since the key is inside a Response object, click on “+” of Response and select email. Select type as “View” and select the component to bind. We will do the same for gender and status and click “Next.”

In Step 3:- Here, to handle our action. Say, for example, to Toast an Error message if any error occurs. So, from the “On Error” dropdown, select “Show alert”, select “Toast”, enter the message, and click on “Save” and “Submit”.

• You can see that our API is Integrated successfully! You can “Build App” and make further essential changes.

I hope this helped you out with your API Integration !🤝

Keep exploring, Keep Building 💪and Keep Integrating!

Conclusion:

• You can build your application in less than 30 minutes using DhiWise🤩.
• DhiWise has some amazing features which can help you build more with minimal efforts like Authentication, Supabase Integration, Navigation, Firebase Integration, API Integration and a lot more.

About Me:

I’m a Software Developer from DhiWise👩‍💻. It’s a pro-code dev tool that generates production-ready code for trending technologies/frameworks. Sign up for free!🤘

You can find me on LinkedIn to stay updated with the latest tech updates of DhiWise. 😃