Flutter is a cross-platform framework that relies on native code to offer advanced features.
On mobile platforms, it uses Platform channels to send messages between Dart and the native platform (iOS or Android).

I recently developed a plugin at Bam and needed to debug native code easily. In this article I will present how to debug Kotlin code for Android and Swift code for iOS. It will also lead you to use the correct tools to have full autocomplete while developing a Flutter plugin (who likes to wait runtime to see a missing bracket?).

Prerequisites

To follow the same folder structure, you can generate a sample plugin folder with this command:

++pre>++code data-line-start="12" data-line-end="14">flutter create --template=plugin --platforms=android,ios bam_plugin
++/code>++/pre>

Note that if you're creating a new plugin, you should now use the federated folder structure.

If you're running the example you should have this simple app.

Dart

The first thing to know to properly debug a Flutter plugin, is to debug the Dart code. If you're using VSCode or Android Studio, it is straightforward.

In the ++code>lib++/code> folder, you can just click on the left end of a line to add a breakpoint.

Upon launching the application with debugging (F5 on VSCode), the app will stop when the Platform channel is invoked. But you don't have access to the native code execution. In order to see the logs for the native part, you will have to open directly the Android or the iOS project.

Android

In order to debug the Android side of the plugin, you should first open the ++code>example/android++/code> folder with Android Studio.
You should have the following folder structure:

Since ++code>bam_plugin++/code> is a dependency of your Android project it will directly show under your ++code>app++/code>. Here, you will be able to code your plugin with all the autocomplete features you would be missing in VSCode.

You can also add a breakpoint in the ++code>BamPlugin.kotlin++/code> file and debug directly in Android Studio.

iOS

In order to debug the iOS side of the plugin, you will need to open the ++code>example/ios++/code> with XCode.

Note that you can directly open the correct folder with this command:

++pre>++code data-line-start="51" data-line-end="53">xed example/ios++/code>++/pre>

It will open the ++code>xcworkspace++/code> if Cocoapods is available, and the ++code>xcodeproj++/code> otherwise.

You can then expand a lot of folders to reach your plugin files and start editing here with full autocomplete.

You can here add a breakpoint to your ++code>BamPlugin.swift++/code> file and start debugging your Platform channel calls.

Conclusion

Even if at first, through VSCode, you couldn't use any of the debugging feature, you should now be able to develop a native plugin more efficiently. If you have any comment or suggestion, don't hesitate to drop a message @BeGuillaume on Twitter.

Let me know if you're interested in other tutorials covering other platforms.