π°οΈ API Sentinel
A structured, developer-friendly networking and debugging layer for Flutter.
api_sentinel provides a clean and consistent way to handle API requests, error mapping, and runtime debugging through an on-screen overlay.
β¨ Features
β
Unified API call interface via ApiService.instance.request()
β
Customizable callbacks for success, Dio exceptions, and general exceptions
β
Centralized error handling and message parsing
β
Floating on-screen debug overlay to visualize requests
β
Built with dio and get (GetX) for lightweight reactivity
β
Supports Android, iOS, and Web
π¦ Installation
Add this line to your pubspec.yaml:
dependencies:
api_sentinel: ^0.0.3
Then run:
flutter pub get
π§ Architecture Overview
The library is built around three core layers:
| Layer | Description |
|---|---|
| ApiService | Handles all HTTP requests (GET, POST, PUT, PATCH, DELETE) through Dio. |
| ErrorHandler | Converts all errors (network, timeout, response, etc.) into readable Failure objects. |
| DebugOverlay | Shows all ongoing and past requests on top of your UI during runtime (toggleable). |
βοΈ Usage
1οΈβ£ Initialize the Service
final api = ApiService(baseUrl: 'YOUR_BASE_URL');
2οΈβ£ Make a Request
Each request is wrapped with ApiService.instance.request()
This ensures that error handling, logging, and overlay integration all happen automatically.
await ApiService.instance.request(
method: HttpMethod.get,
url: 'SOME_REQUEST',
onSuccess: (response) {
print('β
Success: ${response.data}');
},
onCatchDioException: (error) {
print('β Dio Error: ${handleErrorMessage(error)}');
},
onCatchException: (error) {
print('π₯ Exception: ${handleErrorMessage(error)}');
},
);
This pattern applies to any HTTP method β just change the method and url.
3οΈβ£ Supported HTTP Methods
You can use all standard HTTP verbs through the HttpMethod enum:
enum HttpMethod { get, post, put, patch, delete }
π§© Error Architecture
| Error Type | Source | Failure Example |
|---|---|---|
| Connection Timeout | Dio | (-1) Connection timed out |
| Bad Request | HTTP 400 | Bad Request |
| Unauthorized | HTTP 401 | Unauthorized access |
| Forbidden | HTTP 403 | Access denied |
| Not Found | HTTP 404 | Resource not found |
| Server Error | HTTP 500 | Internal server error |
| Cancelled | Dio CancelToken | Request cancelled |
| Unknown | Fallback | Something went wrong |
π§° Debug Overlay
π§ Floating Draggable Widget
A persistent, draggable button gives quick access to real-time logs.
Stack(
children: [
// Your main widget
MyApp(),
// Your debug overlay button
const DebugOverlayWidget(),
]
)
Inside, youβll see:
- A real-time log list for each request
- Search and filter by method/status code
- Tap any log to expand request/response JSON
- Toggle between Tree View and Pretty JSON
- Click to expand full-screen
π³ JSON Tree Viewer
Displays structured hierarchical JSON for nested inspection.
π¨ Pretty JSON Viewer
Shows syntax-colored formatted JSON text.
π₯ Full-Screen View
Click the expand icon (π) in the corner to open the full JSON view for better readability.
Whenever your app performs an API call through ApiService, it will appear in a floating overlay with:
- Method type (GET/POST/PUT/PATCH/DELETE)
- Status code
- Response time
- Response preview
π§ͺ Example Project
A complete example app is included under the example/ directory.
To run it:
cd example
flutter run
It includes a test page with colored buttons for:
- GET
- POST
- PUT
- PATCH
- DELETE
- 404 Error simulation
All using the ApiService and DebugOverlay.
π License
MIT License Β© 2025 Developed and maintained by Aref Yazdkhasti
π¬ Contribution
Contributions are welcome!
If youβd like to improve the debugging UI, extend the ErrorHandler, or support additional APIs, open a PR or issue.
π§ Future Plans
Response caching layerRetry strategy for failed requests and 401 unauthenticated requestFilterable API session logs
API Sentinel β Because understanding your API should be as clear as your code.
Libraries
- api_sentinel
- controllers/api_service
- controllers/debug_overlay/debug_interceptor
- controllers/debug_overlay/debug_log_controller
- controllers/error_handler/error_handler
- global_configs
- models/debug_log_entry
- models/failure
- models/webService/data_source
- models/webService/response_code
- models/webService/response_message
- screens/debug_page
- screens/json_full_screen_view
- widgets/debug_overlay_widget
- widgets/json_tree_view
- widgets/pretty_json_view
- widgets/search_input_field