Document how to edit native code generated by Flutter in IDE

When working on a plugin (created with flutter create --plugin) it is nice to edit the native iOS/Android code in an IDE that supports all modern conveniences of editing code (e.g. auto-complete, error checking as you type, etc). Unfortunately, it is not super-obvious, how to load the native code in Android Studio or Xcode. We should document that. Here is how I made it work:

run flutter run to build everything
iOS with Xcode
Open example/ios/Runner.xcworkspace in Xcode. Everything should work out of the box. The code for the example app can be found (and edited in place) under Runner/Runner in the Project Navigator on the left side. The code for the plugin under development can be found (and edited in place) under Pods/Development Pods/<plugin name>/Classes.
Android with Android Studio
In Android Studio, go toFile > New > Import Project... and select example\android\build.gradle in the import dialog. In the "Gradle Sync" dialog hit OK to automatically setup gradle. (DO NOT allow Android Studio to update your gradle version, if asked, see Android Studio updated gradle version of my project and now flutter run fails #9842) The code for the example app can be found in the Project tab under app/java. The code for the plugin under development lives under <plugin name>/java.

Similar instructions would probably also be good to have for the native code of a regular app (created with flutter create without --plugin).

Note: I tried to edit the Android Sources of the Firebase Cloud Messaging plugin in IntelliJ (as described in https://flutter.io/intellij-ide/#edit-android-code), but that wasn't a great experience:

flutter create --plugin is not generating the right modules for this workflow out-of-the-box (No 'Open Module Settings' when right-clicking android folder flutter-intellij#941)
Even after the modules are configured manually, IntelliJ only resolves imports from the core Android SDK correctly. Imports to other things (Android Support Repository or Firebase for example) show up as unresolvable and making them resolvable seems like a painful process (Unable to resolve imports from Android Support Repository flutter-intellij#966, I didn't go down that path as Android Studio handles this automatically when following the steps I outlined in my first post)

@roughike

@roughike You asked for this on Gitter. See first post for instructions.

@goderbauer

@goderbauer
Hi and thanks for replying!

I actually got that far before even asking this question on Gitter. The part where I had problems with was the fact that I had two options when opening the project in Android Studio:

Option 1: Don't mark the src/main/java as a source folder in the IDE. Edit the Android side of the plugin without code completions & all that IDE goodness.
Option 2: Mark the src/main/java as a source folder in the IDE. All Flutter specific parts show "package not resolved" errors, and turn red in the IDE. Get autocompletions for all other parts, except Flutter -related things, such as MethodCallHandler and such.

I couldn't find the package that had those Flutter SDK components anywhere, even though I tried. Then I saw this YouTube video by Brandon Donnelson about creating plugins, and he got it figured out.

So, the steps for solving my issue were:

Find flutter/bin/cache/artifacts/engine/android-x64/flutter.jar.
Copy the flutter.jar to a folder (let's say tmplibs) that's a direct sibling of the "android" module of your plugin.
Right-click the flutter.jar -> Add as a library.
Since it seems that Flutter SDK satisfies the dependency during runtime, now we basically have the flutter.jar classes included twice in our app. Go to the module settings -> dependencies -> mark the scope of the flutter.jar as "Provided".

All this is shown in Brandon Donnelson's YouTube video, starting from 12:43: https://youtu.be/tErY3QWTZSA?t=12m43s

@roughike

@roughike Adding the flutter.jar library should not be needed, if you import the example/android/build.gradle file as suggested by @goderbauer above.

Please let us know if that does not work for you.

Okay!

I'll try that once I get home and post here the result, thanks. If it doesn't work, I'll surely start bugging you guys again :)

@skybrian

FYI @skybrian.

Nice job. I'll add another two videos, editing native code to follow up my videos.

Importing the example/android/build.gradle indeed fixes the problem. I skimmed through that instruction in the first time, since I just assumed you would mean the android plugin gradle file, NOT the example project one.

Thanks!

@mit-mit

Thanks for following-up!

FYI @mit-mit, another set of wrinkles to iron out (and in the meantime document).

Importing the example/android/build.gradle no longer works, I just get an error dialog :

The project file specified already exists.

[✓] Flutter (Channel master, v0.7.6-pre.35, on Linux, locale en_CA.UTF-8)
	• Flutter version 0.7.6-pre.35 at /work/installs/flutter
	• Framework revision 3306fc1042 (3 days ago), 2018-09-04 10:50:04 -0700
	• Engine revision de4c7a53f2
	• Dart version 2.1.0-dev.3.0.flutter-760a9690c2

[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
	• Android SDK at /home/david/Android/Sdk
	• Android NDK location not configured (optional; useful for native profiling support)
	• Platform android-27, build-tools 27.0.3
	• ANDROID_HOME = /home/david/Android/Sdk
	• Java binary at: /work/installs/android-studio-3.0/jre/bin/java
	• Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)
	• All Android licenses accepted.

[✓] Android Studio (version 3.1)
	• Android Studio at /work/installs/android-studio-3.0
	• Flutter plugin version 28.0.1
	• Dart plugin version 173.4700
	• Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)

[!] IntelliJ IDEA Community Edition (version 2018.1)
	• IntelliJ at /work/installs/idea-IC-181.4445.78
	✗ Flutter plugin not installed; this adds Flutter specific functionality.
	• Dart plugin version 181.4892.1
	• For information about installing plugins, see
	  https://flutter.io/intellij-setup/#installing-the-plugins

[!] Connected devices
	! No devices available

! Doctor found issues in 2 categories.

Android Studio 3.1.4
Build #AI-173.4907809, built on July 23, 2018
JRE: 1.8.0_152-release-1024-b01 amd64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Linux 4.4.0-133-generic

Plugin was created a few days ago.

No workaround for this?

Did what the plugin guide has required to the letter:

Before editing the Android platform code in Android Studio, first make sure that the code has been built at least once (in other words, run the example app from your IDE/editor, or in a terminal execute cd hello/example; flutter build apk).

Then use the following steps:

Launch Android Studio.
Select Import project in the Welcome to Android Studio dialog, or select File > New > Import Project… from the menu, and select the hello/example/android/build.gradle file.

This step breaks with:
Cannot Import Project
The project file specified already exists.

@larssn

@larssn I'm also stuck here. Did you find any solution?

This step breaks with:
Cannot Import Project
The project file specified already exists.

@happy-san

@happy-san I recall just using "open" on the example folder.
That should add both the plugin and the example to the current workspace.

I did the following steps:

~~Open example folder~~
~~Open android/app/main/java/io.flutter.plugins/GeneratedPluginRegistrant and hopefully Android Studio will prompt you to open it separately, accept that.~~
~~Remember to not accept the prompt which says to upgrade gradle.~~
~~Hopefully it would open your native code without giving any errors.~~

Edit: tried this again, didn't work 👎🏾

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Document how to edit native code generated by Flutter in IDE #9698

So, the steps for solving my issue were:

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Document how to edit native code generated by Flutter in IDE #9698

Description

Activity

goderbauer commented on May 1, 2017

goderbauer commented on May 16, 2017

roughike commented on May 16, 2017

So, the steps for solving my issue were:

mravn-google commented on May 16, 2017

roughike commented on May 16, 2017

pq commented on May 16, 2017

branflake2267 commented on May 16, 2017

roughike commented on May 16, 2017

pq commented on May 16, 2017

Rockvole commented on Sep 7, 2018

larssn commented on Jun 22, 2020

happy-san commented on Feb 15, 2021

larssn commented on Feb 15, 2021

happy-san commented on Feb 15, 2021

github-actions commented on Aug 3, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions