Instagram Login with Flutter

5 min readAug 15, 2021

Hello guys welcome! Today, I will talk about how to login to Instagram with Flutter. I hope it will be fun. Don’t forget to like and shareeee! Let’s gooo!

We have to pay attention 2 issues for Login with Instagram to our app.

1-) Permissions (FB Developer account & Instagram Basic Display API)

2-) Technical (Coding)

I will talk about how we can get permission in this article but generally talk about technical business. We are developers :)

At first, We need to have Facebook Developer account to get permission for Login with Instagram. To open Facebook Developer account, we can use random Facebook account but we will need business account or page for using Facebook Developer.

After we create our account, we need to do that click ‘My Apps’ button to top right and create new APP. If we created our APP then let’s go to some technical issues.

In left menu, click “Add Products” and select Instagram Basic Display API. You can setup Instagram Basic Display API for Android or iOS or both. I will setup for both. While setting up the Basic Display API, we will choose data that want to get from user, for example if we want only user profile info, we need to setup “instagram_graph_user_profile”. If we want both user profile info and media (photos and videos), we need to set up “instagram_graph_user_profile” and“instagram_graph_user_media”.

After setup Basic Display API, Facebook will give us an APP ID and an APP SECRET. With this two parameter, we will connect Basic Display API and do login to Instagram. When we have done our app, our app will be reviewed by Facebook, you have to submit from “App Review for Instagram Basic Display” for confirm by Facebook.

(Note: In Instagram Basic Display API, do not forget add test accounts because before the app is reviewed and confirmed, you cannot login except test accounts. Also you can add your account as a test account.)

Let’s create our flutter project and install the packages that use in our app:

With “flutter_webview_plugin” package, we will connect Instagram Login page and we will listen the URL and if the user authenticated successfully, redirect automatically home page. If the user did not authenticate, URL will redirect us automatically redirect URL that we gave to Facebook while setup the Instagram Basic Display API.

With “http” package, we will send request get and post for fetching user’s data. Actually I am using Dio but http can be used in small project like this.

After installed our packages, we can prepare our files like this:

If we make our folders separately according to their tasks, we will have written both clean and quality code. I think we should pay attention to this even in our simplest projects.

“instagram_constant.dart”: In this file, we will keep the parameters that Facebook gave us and we gave the Facebook and when we need this parameters, we will call with class instance.

“instagram_model.dart”: In this file, we will post necessary data to Instagram API and with the response value that returns to us, we will fetch user informations from Instagram API.

“instagram_view.dart”: In this file, we will connect directly Instagram Login page with webview and login to Instagram.

“home.dart”: In this file, after we login successfully, we will print user data on screen.

We prepared our folders, now we will create our “instagram_constant.dart” file, basically:

We created Constant Class for using as instances. The parameters that we use here, clientID and appSecret is parameters that Facebook gave us, redirectURI is URL that we gave the Facebook and scope is parameter that we will send request to URL by API. If we want to get user media, we will need to use “user_media” in scope. Now let’s create our functions.

userFields: The values that we will request to fetch from the API.

getAuthorizationCode(): In this function, we will convert to string that we can use authorization code that Facebook will give us.

getTokenAndUserID(): In this function, we will get Token and userID after posting the values in our constant class to Instagram API.

getUserProfile(): in this function, we will fetch id and username from Instagram API after getting Token and userID.

After we prepared all background tasks, now we can create our view.

In here, we created StatelessWidget for connecting Instagram Login page and call “buildRedirectToHome()” function for listening URL changes from FlutterWebviewPlugin instance. The URL we listen, if the URL is equal to redirectURI in our InstagramConstants class, we call getTokenAndUserID() function from InstagramModel instance and get Token and UserID, then with “.then()” parameter, if this process is done (it means isDone == true), now we call getUserProfile() function and fetch id and username parameters. After this process is done successfully, we redirect the user to HomeView page with webview.close() function.

(Note: I used Builder Widget, we could use StatefulWidget but we had to do so many setState business so it would slow down app performance.)

Now and finally it is HomeView code. The only thing we will do for HomeView, after create token and name instance, we will print on screen.

Now that everything is ready, we can call our Instagram View in our “main.dart” file and run the application.