Flutter Android Studio Troubleshooting: Could not Compile Flutter to Android device

This error also known as:

• Device selection on Android Studio is greyed out.
• Not applicable for the “main.dart” configuration.
• Could not connect to lockdownd, error code -13.

What’s the symptom?

You will see this issue when you’re trying to compile to your Android device via Android Studio, but for some strange reason, you no longer see your mobile device to the left of “main.dart” dropdown.

Yep, no longer you see the leftmost dropdown.

You’ll instinctly When you move your mouse toward the third dropdown (or in your case, the second dropdown since the leftmost isn’t there), and see a popup saying “Not applicable for the “main.dart” configuration, and it isn’t clickable (of course).

You can attach any number of devices, but the leftmost dropdown will still not be there.

Because the problem is not in your device. There’s actually something wrong with your project’s SDK configuration, which prevent Android Studio from recognizing entry point, or recognizing what framework it is.

Now I don’t know whether this issue also appears on pure Android app using Java/Kotlin, but I only encounter this on Flutter on Android Studio.

How to solve this?

Open menu File > Project Structure.

First, choose the Project menu under Project Settings. You’ll see settings about Project SDK. It should says Android API level. But sometimes, once in a blue moon, it can says “<NO SDK>”.

The obvious thing to do here is to click on the Project SDK dropdown, and select whichever latest SDK listed there.

Next, choose the Modules menu under Project Settings. You’ll see your modules listed on the second column.

Select any module, and then look on the third column, where it has three tabs: Sources, Paths, Dependencies. Choose Dependencies.

Now, once again, once in a blue moon, the Module SDK can suddenly select “<NO SDK>”. Choose the same latest SDK you choose on the Project settings, which in my case, is Android API 29 Platform.

Repeat this for every module you have on the second column.

If you have done, click OK to close the screen.

Now, the Android Studio will adjusting itself to the new settings, and you’re (hopefully) will see the device selection to the left of the “main.dart” dropdown, which will indicate that you now able to compile to the device selected.

Hope it helps! If you have any other issue, leave it in comment below and see if I can help you. Thanks!

Source: https://flutterforum.co/t/emulator-field-grayed-out-not-applicable-for-the-main-dart-configuration/317/9

Troubleshooting to Setup Twitter Login for Flutter

I’m currently in the learning phase of Flutter. I decided to create simple app using Twitter’s API. I did a simple tweets retrieval based on Twitter public screenname using the app’s access token, but obviously I can’t retrieve Twitter protected screenname, which requires to use user’s access token that already followed the protected screenname. So the next project for me is to create user Twitter authentication in the app. I thought it would be straightforward process, just like the other Twitter API. But unfortunately (I hit a roadblock where all of authentication request immediately fail. After some hairpulling search around, I come with a set of troubleshooter steps of how to setup the Twitter authentication.

Note: these steps will be written from the Flutter platform point of view, but most of the parts are actually Twitter app configurations, so it might help you to overcome some of your situations.

1. Make sure you have created the app in the Twitter developer

This is an obvious step. You need to have something that your Flutter code can refer to when making that authentication request. Otherwise, Twitter API is bound to get wild authentication spam request from all over the world. Here’s the link to get started:

https://developer.twitter.com/en/apply-for-access

It’s a fairly straightforward process. If you just apply for the basic dev access without the bells and whistles, your sign up application should be approved immediately without the need for you to wait for approval process.

Once you have sign up and sign in, create the app on:

https://developer.twitter.com/en/apps

2. Make sure you have take note of the consumer key and consumer secret key

After you created your app, you will notice there’s a tab called “Keys and Tokens”. Open the tab, generate the keys, and copy paste the API key and API secret keys somewhere. You will need these for two purposes later.

3. Make sure you have added these URLs on the app callback

This is the most cryptic part of this troubleshooting. Long story short, you need to add these URLs on the app callback in order so that the three-legged authentication process is not rejected immediately by Twitter.

Open the “app details” tab. Tap on “Edit”. Scroll down, and find the callback field. Make sure you have these URLs listed:

twitterkit-<API key>://
twittersdk://

So for example, if the API key (do not confuse it with API secret key) I copied from step #2 is “asdfasdfasdf”, then I will have to add these two URLs on callback:

twitterkit-asdfasdfasdf://
twittersdk://

The first one is for iOS, and the second one is for Android. So add whichever one suits your needs.

Fail to do this step properly will resulted in Twitter reject your authentication request with message, wrapped in XML tags:

“Callback URL not approved for this client application. Approved callback URLs can be adjusted in your application settings” — this is if you have entered any URL except those two URLs.

4. Use third-party package to handle the three-legged authentication

Writing code for the three-legged authentication may involve some pretty cumbersome coding. So I advise to use a flutter package called flutter_twitter_login, which already handled the in app browser call for you. All you have to do is just implement the code to call authentication, which is also given nicely in the package pub.dev website.

https://pub.dev/packages/flutter_twitter_login

Add the dependency for the package on your .yaml file.

dependencies:
    flutter_twitter_login: ^1.1.0

(It was at version 1.1.0 at the time this post is written)

Call the pub get. If you’re using the Android Studio, you can usually find an instant button at the Flutter command bar on top of your edit area, below the document tab, when you’re opening the .yaml file.

Then add this code to do the authentication, which I took straight from the package example. Change it to suit your needs. You will need to supply the API key and API secret key to the TwitterLogin constructor here.

import 'package:flutter_twitter_login/flutter_twitter_login.dart';
...
// in your widget method
var twitterLogin = new TwitterLogin(
    consumerKey: '',
    consumerSecret: '', 
); 
final TwitterLoginResult result = await twitterLogin.authorize(); 
switch (result.status) {
    case TwitterLoginStatus.loggedIn:
      var session = result.session;
      _sendTokenAndSecretToServer(session.token, session.secret);
      break;
    case TwitterLoginStatus.cancelledByUser:
      _showCancelMessage();
      break;
    case TwitterLoginStatus.error:
      _showErrorMessage(result.error);
      break; 
 }

5. Make sure you already use the user’s token and secret on the app’s call

This is a common mistake. Devs usually try to make requests using the app’s API key and API secret key to get the app’s access token to make sure the request works using the app’s access token. And then they added the user authentication to get the user’s access token. But then, they forgot to switch into using the user’s access token instead of the app’s access token, which you will get from the session data from step #4.

There it is, troubleshooter for Twitter login using Flutter. Hope it helps to make your day! If you have some question, ask away. I hope I can help solve it. If I can’t, well, stackoverflow is your best friend. 😊