An open API service indexing awesome lists of open source software.

https://github.com/paco89lol/flutter_http_debug

Flutter inspector / debugging tool
https://github.com/paco89lol/flutter_http_debug

debugging-tools dio flutter https network-inspector

Last synced: 24 days ago
JSON representation

Flutter inspector / debugging tool

Awesome Lists containing this project

README

          

The http_debug library simplifies debugging HTTP requests and responses in Flutter applications. It provides a floating debug button `HttpDebugFloatingButton` that overlays your app's UI, offering real-time access to HTTP traffic. With this tool, you can inspect and analyze requests, headers, payloads, and responses directly within your app, without relying on external tools like Postman or browser developer tools.



























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

# Get Started
add dependency
```yaml
dependencies:
http_debug: ^1.0.2
```

# Initialize
In the `MaterialApp` widget, use the `builder` parameter to wrap your app's widget tree with the `HttpDebugFloatingButton`, ensuring it is accessible globally throughout your app.

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

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

// This widget is the root of your application.
@override
Widget build(BuildContext context) {

return MaterialApp(
routes: {
'/': (context) => HomePage(), // Default route
'/sendRequest': (context) => SendRequestDetailPage(),
},
initialRoute: '/', // Set the initial route
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
),
debugShowCheckedModeBanner: false,
builder: (context, child) {
return Stack(
children: [
child!,
HttpDebugFloatingButton(),
],
);
}
);
}
}
```

# Dio Users
1. Add interceptor class `DioInterceptor` for dio client.
```dart

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

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

```

# Http Users
1. Initialize `Client` to client class, then use `httpClient` on the `InterceptedHttpClient` constructor
```dart
HttpInterceptor get httpClient {
InterceptedHttpClient(
httpsDebugController: HttpsDebug.instance,
httpClient: http.Client(),
);
}

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

# Acessing the UI