Thanks to Flutter support for the Linux desktop, we can now expect more beautiful apps for this great platform. However, when you want to write a custom plugin to expand your app's functionality, you need to write some C code. I haven’t found instructions on how to do that anywhere, so here is how to set up Visual Studio Code to develop and debug Flutter plugins for Linux.
Before you start
I expect that you already have Linux build tools and VS Code installed, but if not, here are two links on how to do that:
Desktop support for Flutter
Desktop support allows you to compile Flutter source code to a native Windows, macOS, or Linux desktop app. Flutter's…
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud…
Create your plugin from template
First, you need to create your project. Assuming you have Flutter in your PATH variable, invoke this command:
flutter create — org com.example — platforms=linux myapp
Where myapp is the name of the plugin. (You can also add more platforms after a comma.
Compile project first
On Linux, Flutter uses CMake's tool when compiling embedder code and launches GTK window with our app. To debug native code, first, you need to run a flutter project. It will make a tool to create necessary symlinks for cmake project. Inside myapp/example, run our favorite command:
After that, quit the app.
Opening main project
Now the open root of our newly created plugin ( myapp/ ) inside VS Code, next installs Microsoft C++ plugin — https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools . You will be asked to join the Insider channel for the plugin; you can join it if you want new features to land faster.
You will also be asked if you want CMake integration for the project, choose Yes, and next click Locate Cmake file.
You will be asked for the location of the CMakeList.txt file and make you choose the one inside:
Do not choose the one inside myapp/Linux, or IntelliSense will not work.
Now relaunch vs. code.
At this point, code completion should work.
Setting up debugging
Debugging with print statements is not the best way to analyze your code so let’s configure a proper debugger.
The inside root folder ( myapp/ ) create subfolder .vscode (notice the dot) and inside it a file named c_cpp_properties.json — that’s where vscode’s C++ plugin reads config from:
You also will need a settings.json file for cmake config:
Finally, create `launch.json` with two launch configurations inside it:
"name": "Launch Flutter",
"name": "Debug native",
You need to adjust the name of our executable created by the flutter run command. Take a look at this part of JSON:
The name of our executable is myapp_example. It might be different if you created a project with a different name. If you’re running a different version of Flutter, then the path might be slightly different. You can check if that’s the right binary by simply running it.
Running the code
We created two launch configurations, one for running flutter with a dart, like the usual, and the second one for the running created binary with C++ debugger.
One caveat to this approach is that you will have to rerun flutter run if you change something in dart code.
Is it perfect? No, but is it better than printing variables to console? YES
Hope you find this useful and hopefully I will see more Flutter plugin on Linux shortly.