Setting Up a Development and Debugging Environment for Your C/C++ Project with Flutter Apps

For Flutter app development, it’s easy to set up a development and debugging environment with Dart using VS Code or JetBrains IDE.

However, when using C/C++ in Flutter, things are different because the official Dart & Flutter IDE plugins are not …


This content originally appeared on DEV Community and was authored by Andy Dong

For Flutter app development, it's easy to set up a development and debugging environment with Dart using VS Code or JetBrains IDE.

However, when using C/C++ in Flutter, things are different because the official Dart & Flutter IDE plugins are not designed for C/C++ development.

To develop and debug C/C++ on multiple operating systems, we need to configure and set up different IDEs for each platform as follows:

There are many development environments for C/C++ projects. We can use Xcode for iOS and macOS, Android Studio for Android, Visual Studio for Windows, and other IDE tools for Linux platforms.

In my personal experience, the best development IDE I have used most often is JetBrains' CLion, which provides a consistent development experience across platforms.

For developers using C/C++ in Flutter apps, it's common to deploy and share the same codebase across different platforms with various operating systems and CPU architectures. Using the same IDE makes it more convenient to reuse your experience with these tools.

Configuring Your C/C++ Project with CLion

CLion has built-in support for CMake projects. To set up CLion with IntelliSense, you need to open the project folder that contains the CMakeLists.txt file. In our example project, that will be <project_root>/src:

Setup Clion

CLion will configure your C/C++ projects based on your CMake configuration automatically.

Debugging Your Flutter Apps with CLion

It's easier to debug Flutter apps with CLion on desktop platforms, including macOS, Windows, and Linux.

It's also recommended to develop your C/C++ code on a desktop first, then cross-compile it and run it on mobile platforms.

Starting a Flutter App with CLion LLDB Debugger

First, you need to compile your Flutter app:

flutter build macos --debug

After your Flutter app is compiled, the app will be generated at <project_root>/example/build/macos/Build/Products/Debug/flutter_native_example_example.app.

For Linux or Windows platforms, just look for your Flutter app under the <project_root>/example/build/ directory.

Adding a Debugger Configuration in CLion

Open CLion, click the Edit Configurations selection menu at the top:

Edit Configuration

Click the + button on the top left and select Native Application:

Add Executable

Find and select the executable file for your Flutter app in the <project_root>/example/build/ directory.

Target

The selection results will be as follows:

CLion

Now it's ready for debugging. Click the debug icon on the top bar to start your debugging:

CLion Debugging

Attaching a Running Application with CLion Debugger

If your application started earlier than the CLion debugger, you can attach an existing running Flutter app with the Attach To Process feature in CLion:

Clion Attach To Process

Debugging C/C++ Code in Xcode

Xcode is an alternative IDE for C/C++ debugging on macOS and iOS platforms. First, open the Runner.xcworkspace project in Xcode.

The source code of our C/C++ code is not visible in Xcode by default, so we need additional setup to make it visible and allow setting breakpoints on it:

In Xcode, right-click the Runner project and select Add Files to "Runner":

Xcode Add File

Select the source folder that contains CMakeLists.txt, but keep in mind to unselect all targets at the bottom because we don't want Xcode to package our C/C++ code in our project.

Xcode Select Files

Now we can set breakpoints in Xcode and debug the C++ source code:

Xcode debugging

Debugging C/C++ Code in Android Studio

Android Studio for Android has built-in support for developing and debugging C/C++ code.

For a Flutter app for Android, open the example/android directory in Android Studio:

Android Path

Once your project is fully configured in Android Studio, you will see your C/C++ code recognized and indexed by Android Studio.

Android Studio

Click the app entry point at the top and select "Edit Configuration":

Edit Android Config

Make sure the debug type is set to "Dual (Java + Native)" mode:

Android Debug Mode

Now our C/C++ code can be developed and debugged in Android Studio:

Android Studio Debugging

Debugging C/C++ Code in Visual Studio

Visual Studio on the Windows platform provides a robust developer experience for C/C++.

Flutter projects use CMake to generate Visual Studio project templates.

First, compile your Flutter app by running the following command:

flutter build windows --debug

This will generate the Visual Studio project workspace in the <project_root>/example/build/windows/x64 directory. Open Visual Studio and load the ALL_BUILD.vcproj file from this location.

VS Location

Right-click on the solution title and select Properties:

Config Solution

Change the Single startup project value to flutter_native_example_example:

Change VS Solution

Open the C/C++ code files in the demo_library folder and set your breakpoints:

VS Set Breakpoint

Click on Debug -> Start Debugging:

VS Starting Debugging

Now the debugger should be working:

VS Debugging

Next Chapter

In the next chapter, we will focus on Dart FFI in Flutter apps, covering bidirectional synchronous and asynchronous calls, handling complex data structures, and performance optimization tips.


This content originally appeared on DEV Community and was authored by Andy Dong


Print Share Comment Cite Upload Translate Updates
APA

Andy Dong | Sciencx (2024-08-27T15:57:38+00:00) Setting Up a Development and Debugging Environment for Your C/C++ Project with Flutter Apps. Retrieved from https://www.scien.cx/2024/08/27/setting-up-a-development-and-debugging-environment-for-your-c-c-project-with-flutter-apps/

MLA
" » Setting Up a Development and Debugging Environment for Your C/C++ Project with Flutter Apps." Andy Dong | Sciencx - Tuesday August 27, 2024, https://www.scien.cx/2024/08/27/setting-up-a-development-and-debugging-environment-for-your-c-c-project-with-flutter-apps/
HARVARD
Andy Dong | Sciencx Tuesday August 27, 2024 » Setting Up a Development and Debugging Environment for Your C/C++ Project with Flutter Apps., viewed ,<https://www.scien.cx/2024/08/27/setting-up-a-development-and-debugging-environment-for-your-c-c-project-with-flutter-apps/>
VANCOUVER
Andy Dong | Sciencx - » Setting Up a Development and Debugging Environment for Your C/C++ Project with Flutter Apps. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/08/27/setting-up-a-development-and-debugging-environment-for-your-c-c-project-with-flutter-apps/
CHICAGO
" » Setting Up a Development and Debugging Environment for Your C/C++ Project with Flutter Apps." Andy Dong | Sciencx - Accessed . https://www.scien.cx/2024/08/27/setting-up-a-development-and-debugging-environment-for-your-c-c-project-with-flutter-apps/
IEEE
" » Setting Up a Development and Debugging Environment for Your C/C++ Project with Flutter Apps." Andy Dong | Sciencx [Online]. Available: https://www.scien.cx/2024/08/27/setting-up-a-development-and-debugging-environment-for-your-c-c-project-with-flutter-apps/. [Accessed: ]
rf:citation
» Setting Up a Development and Debugging Environment for Your C/C++ Project with Flutter Apps | Andy Dong | Sciencx | https://www.scien.cx/2024/08/27/setting-up-a-development-and-debugging-environment-for-your-c-c-project-with-flutter-apps/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.