How to connect Charles Proxy with Flutter using Dio.

Photo by Kara Eads on Unsplash (a little bit changed)

So this is my recipe for handling Charles Proxy in my project.
Ingredients:

• Dio
• Charles Proxy
• — dart-define

So first of all small description of Ingredients.

Dio is a great Http client for Dart which I think right now is an industry-standard.

Charles Proxy is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet.

If you don’t know — dart-define there is a great article with step by step instruction on how to properly configure it to work with native parts. It’s basically a way to pass environment variables into your code for Dart and both native platforms (iOS and Android). Here I’m using it only in the Dart part.

So let's start!

1. Add to your flutter run function dart define:

flutter run --dart-define=CHARLES_PROXY_IP=<YOUR_LOCAL_IP>

2. In a place where you initialize your Dio instance call this function:

3. Go to the SSL Certificates page from Charles docs and prepare iOS and Android configurations.

4. Run the flutter run function with dart define from step 1. for example:

flutter run --dart-define=CHARLES_PROXY_IP=192.168.0.52

5. Open Charles for watching the success!!!

Pro-Tip

If you are using Android Studio add special run configuration and add it to your VCS that everybody from your project could see that:

THAT'S ALL 😃

Thanks for reading 🙇 and if you found this recipe useful please leave 👏.