Debug Network Requests in Flutter Using Requestly

Debug Network Requests in Flutter

Introduction

When working with Flutter apps, debugging network requests can be challenging because Flutter doesn’t work with system-level proxy settings. Unlike other platforms where you can configure a proxy at the OS level if you’re using  Requestly  you might not see any traffic from your Flutter app by default. However, there is a workaround for this by manually configuring Flutter’s HTTP client.

In this post, I’ll show you how to configure your Flutter app to work with Requestly, allowing you to efficiently intercept and debug network requests in flutter.  

Why Flutter doesn’t work with system-level proxy ?

Flutter doesn’t work with system-level proxy settings because it uses its own networking stack, which operates independently of the operating system’s network configurations. Unlike many native applications, which rely on the OS to handle network requests and thus inherit the OS-level proxy settings, Flutter’s networking is built using Dart’s own HTTP libraries ( HttpClient). These libraries don’t automatically pick up or use the proxy settings that are configured at the system level.

How to solve this in Requestly !

In Requestly, you need to manually set up a proxy within your Flutter app. By doing this, you can intercept all HTTP / HTTPS requests through Requestly, allowing you to capture, modify, and mock API requests and responses.
Below is a step-by-step guide to configuring your Flutter app to use Requestly.

1. Download certificate

  • Open Incognito window in your browser
  • Go to http://requestly.io/ssl (⚠️ Use http here, not https)
  • This will download RQProxyCA.pem.cert

2. Trust Certificate

  • Open Trusted Certificate Settings by navigating to Settings -> Security -> Encryption & Credentials -> Install a Certificate -> CA Certificate.

  • To install this certificate, select Install Anyway and select the certificate RQProxyCA.pem.cert.

  • To verify Certificate trust settings are now active, go to Trusted Credentials -> UserRQProxyCA should be present here. Alternately, you may simply begin submitting requests and watch as they are logged in the Requestly Network Tab.
    install certificate - Network Requests in Flutter

    3. Set Up the Proxy in Your Flutter App

    Flutter offers several HTTP clients, so we’ll walk through the setup process for some of the most common and popular ones, such as Native HttpClient, Dio and http.
    The steps to configure a proxy for each may vary slightly.

    				
    					// Create a new HttpClient instance.
    HttpClient httpClient = new HttpClient();
    
    // Set the proxy for the HTTP client.
    httpClient.findProxy = (uri) {
      return "PROXY <YOUR_LOCAL_IP>:<PORT>";
    };
    
    // Allow Requestly to receive SSL payloads on Android.
    httpClient.badCertificateCallback = 
      ((X509Certificate cert, String host, int port) => Platform.isAndroid);
    				
    			
    				
    					// Create a new Dio instance.
    Dio dio = Dio();
    
    // Configure the proxy within the onHttpClientCreate callback.
    (dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate = (client) { 
      // Set the proxy for the HTTP client.
      client.findProxy = (url) {
        return 'PROXY <YOUR_LOCAL_IP>:<PORT>';
      };
      
      // Allow Requestly to receive SSL payloads on Android.
      client.badCertificateCallback = (X509Certificate cert, String host, int port) => Platform.isAndroid;
    };
    
    				
    			
    				
    					// Create a new HttpClient instance.
    HttpClient httpClient = new HttpClient();
    
    // Set the proxy for the HTTP client.
    httpClient.findProxy = (uri) {
      return "PROXY <YOUR_LOCAL_IP>:<PORT>";
    };
    
    // Allow Requestly to receive SSL payloads on Android.
    httpClient.badCertificateCallback = 
      ((X509Certificate cert, String host, int port) => Platform.isAndroid);
    
    // Pass the newly created HttpClient to the http.IOClient.
    IOClient myClient = IOClient(httpClient);
    				
    			

    Replace <YOUR_LOCAL_IP> and <PORT> with your computer’s Local IP and Port, which you can find in the Requestly Desktop app.

    4. [if-required] SSL Pinning

    Add these configs to your app codebase for it to work

    1. Add res/xml/network_security_config.xml
    				
    					<network-security-config>
      <debug-overrides>
        <trust-anchors>
          <certificates src="user" />
          <certificates src="system" />
        </trust-anchors>
      </debug-overrides>
    
      <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
          <certificates src="system" />
          <certificates src="user" />
        </trust-anchors>
      </base-config>
    </network-security-config>
    
    				
    			
    1. Add to AndroidManifest.xml
    				
    					<?xml version="1.0" encoding="utf-8"?>
    <manifest ... >
        <application android:networkSecurityConfig="@xml/network_security_config" ... >
        ...
        </application>
    </manifest>
    
    				
    			

    Conclusion

    In this guide, we addressed the challenges of debugging network requests in Flutter due to its lack of support for system-level proxy settings. By manually configuring your Flutter app to work with Requestly. We covered steps for downloading and trusting the Requestly certificate, setting up proxies for various HTTP clients like the native HttpClient, Dio, and http packages, and handling SSL pinning for Android devices running API level 23 and above. With these configurations, you can capture, analyze, and mock API responses, significantly improving your debugging process.

      Share this article:

      Subscribe to our weekly newsletter !

      Join 10k developers and QAs to get weekly updates with Requestly's newsletter.​

      This article was written by:

      Picture of Kanishk Rawat

      Kanishk Rawat

      Kanishk Rawat, a tech enthusiast since childhood, has mastered programming through dedication. Whether solo or in a team, he thrives on challenges, crafting innovative solutions .

      Join 10k developers and get weekly updates with Requestly's newsletter.

      Contents