Introducing http_debug: Simplify HTTP Debugging tool in Flutter Applications 🚀

https://github.com/user-attachments/assets/64818d4f-31c6-4b19-902e-7c95dce4127c

Debugging HTTP requests in mobile applications can feel like a chore. Constantly switching between external tools such as Postman or browser developer tools to inspect API behavior can disrupt your workflow and slow down development. What if you could debug HTTP requests in real-time, directly within your app, without ever leaving your Flutter UI?

I’m excited to introduce [http_debug](https://pub.dev/packages/http_debug), a powerful Flutter library designed to make HTTP debugging seamless, efficient, and integrated. Whether you're a solo developer or part of a team, http_debug empowers you to simplify your workflow and save time during development.

What is http_debug?

The http_debug library introduces a unique floating debug button—HttpDebugFloatingButton—that overlays your app’s UI. This app-level overlay button is always accessible, no matter where you are in your app. With a single tap, you can:

• Inspect HTTP requests and responses
• View headers and payloads
• Analyze status codes and error messages

This means you no longer need to rely on external tools like Postman or browser developer tools for debugging. The debugging environment is right in your app, integrated in real-time, so you can focus on building and improving your application.

Why Choose http_debug over Other Debugging Tools?

Traditional debugging requires external tools like Postman or browser developer tools to analyze API requests and responses. http_debug eliminates this friction by integrating debugging tools directly into your Flutter app.

With the floating debug button, you don’t need to leave your app to inspect HTTP traffic. This not only speeds up your workflow but also makes debugging more intuitive and accessible.

Key Features of http_debug

Here’s what makes http_debug a must-have tool for Flutter developers:

1. Real-Time HTTP Debugging with an App-Wide Floating Button The floating debug button is the core feature of http_debug. It overlays your app’s UI, ensuring you always have access to debugging tools, no matter where you are in your app.
2. Works with Popular HTTP Libraries http_debug supports both dio and http clients, so it fits seamlessly into most Flutter projects.
3. Cross-Platform Compatibility Compatible with all major platforms — Android, iOS, Web, Linux, macOS, and Windows — making it a versatile solution for any Flutter developer.
4. Dart 3 Compatible Built with the latest Dart capabilities, ensuring long-term support and reliability.
5. Simple Integration Designed to be developer-friendly, http_debug can be integrated into your app with just a few lines of code.

How to Integrate http_debug?

Ready to experience seamless HTTP debugging? Here’s how easy it is to get started:

1. Add the Library

Add http_debug as a dependency in your pubspec.yaml file:

dependencies:
  http_debug: ^1.0.2

2. Enable the Floating Debug Button

Wrap your app’s widget tree with the HttpDebugFloatingButton using the builder parameter of your MaterialApp:

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        '/': (context) => HomePage(),
        '/sendRequest': (context) => SendRequestDetailPage(),
      },
      initialRoute: '/',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      debugShowCheckedModeBanner: false,
      builder: (context, child) {
        return Stack(
          children: [
            child!,
            HttpDebugFloatingButton(), // Add this to enable the floating button
          ],
        );
      },
    );
  }
}

3. For Dio Users

Add the DioInterceptor to your dio client:

Dio get dioClient {
  final client = Dio()..interceptors.add(DioInterceptor());
  return client;
}

/// Use dio regularly
dio.get(
  'https://api.ipify.org?format=json',
  options: Options(headers: {"abc": "abc"}),
);

4. For HTTP Users

Initialize the InterceptedHttpClient to enable debugging for http requests:

HttpInterceptor get httpClient {
  return InterceptedHttpClient(
    httpsDebugController: HttpsDebug.instance,
    httpClient: http.Client(),
  );
}

/// Use the http client regularly
await client.get(
  Uri.parse('https://api.ipify.org?format=json'),
  headers: {"abc": "abc"},
);

Ready to Try It?

Start debugging smarter today by adding http_debug to your Flutter project:

• Add the Library: [http_debug on Pub.dev](https://pub.dev/packages/http_debug)
• Explore the Code: GitHub Repository

Have questions, feedback, or feature requests? Feel free to share them via GitHub or in the comments below. Together, we can make HTTP debugging in Flutter even better!

Join the Conversation

Have you tried http_debug? How do you currently debug HTTP requests in your Flutter apps? Let me know your thoughts or experiences in the comments!

Let’s build better, faster, and smarter — together. 🚀

Flutter #MobileDevelopment #APIDebugging #OpenSource #Dart