https://github.com/dzikrul1616/flutter_floating_logger
floating_logger is a Flutter library that provides a floating widget for real-time API request logs. It allows developers to monitor API fetch responses and easily copy the corresponding curl request for testing or debugging, making it an essential tool for efficient development and debugging.
https://github.com/dzikrul1616/flutter_floating_logger
curl dart flutter json logger rest-api
Last synced: 3 months ago
JSON representation
floating_logger is a Flutter library that provides a floating widget for real-time API request logs. It allows developers to monitor API fetch responses and easily copy the corresponding curl request for testing or debugging, making it an essential tool for efficient development and debugging.
- Host: GitHub
- URL: https://github.com/dzikrul1616/flutter_floating_logger
- Owner: dzikrul1616
- License: mit
- Created: 2025-01-28T04:02:45.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-02-16T02:56:24.000Z (4 months ago)
- Last Synced: 2025-03-19T23:16:25.177Z (3 months ago)
- Topics: curl, dart, flutter, json, logger, rest-api
- Language: Dart
- Homepage: https://pub.dev/packages/floating_logger
- Size: 11.6 MB
- Stars: 17
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# floating_logger 🚀
**`floating_logger`** is a Flutter library designed to help developers debug and test API calls with ease. It provides a floating widget that allows you to monitor API requests in real-time and even **copy the curl command** for quick testing. Perfect for anyone who wants to streamline the development and debugging process! ⚡
## 📌 Features
- 🎨 **Beautify Debugger Console** - Improved readability for logs
- 📜 **Beautify JSON Response Item** - Better JSON formatting
- 📋 **Copy cURL (Long Tap)** - Easily copy API requests
- 🎈 **Floating Button (Flexible Logger)** - Moveable debugging widget
- 🔄 **Preferences for Global Hide/Show** - Toggle visibility globally
- 🔧 **Custom Item List** - Customize how log items are displayed
## Installation 🔧
To get started, add `floating_logger` to your `pubspec.yaml`:
```yaml
dependencies:
floating_logger: ^latest_version
```
package import :
```dart
import 'package:floating_logger/floating_logger.dart';
```
## Demo 🎥
Check out the live demo of **Floating Logger**:
[](https://dzikrul1616.github.io/preview_floating_logger.github.io/)
## Preview Debug
Here is the preview of the debug console log for the HTTP request:
*Above: Example of the HTTP request.*
*Middle: HTTP response log.*
*Below: HTTP error log.*
## 📖 Usage
### 🏗 Wrapping Your App with `FloatingLoggerControl`
To activate the floating logger, wrap your main widget inside `FloatingLoggerControl`.
```dart
return FloatingLoggerControl(
child: Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text("Floating Logger Test"),
),
),
);
```
### 🌍 Logging API Calls with `DioLogger`
Replace your `Dio` instance with `DioLogger` to ensure API logs appear in the floating logger.
```dart
Future fetchData() async {
try {
final response = await DioLogger.instance.get(
'https://api.genderize.io',
queryParameters: { "name": "james" },
);
if (response.statusCode == 200) {
// Handle API response
}
} catch (e) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('API request failed')),
);
}
}
```
---
## 🎚 Toggle Floating Logger Visibility Using Preferences
Use `ValueNotifier` to toggle the logger visibility dynamically. This allows you to enable or disable the logger and persist the setting across app sessions.
### 📌 Define the Visibility Notifier
```dart
final ValueNotifier isLoggerVisible = ValueNotifier(true);
@override
void initState() {
loadLoggerSettings();
super.initState();
}
Future loadLoggerSettings() async {
try {
bool pref = await getStoredPreference();
setState(() {
isLoggerVisible.value = pref;
});
} catch (e) {
print(e);
}
}
Future getStoredPreference() async {
return await CustomSharedPreferences.getDebugger();
}
```
### 📌 Apply Preferences in `FloatingLoggerControl`
```dart
return FloatingLoggerControl(
getPreference: getStoredPreference,
isShow: isLoggerVisible,
child: Scaffold(
appBar: AppBar(title: Text("Logger Toggle Test")),
body: Switch(
activeTrackColor: Colors.blue,
value: isLoggerVisible.value,
onChanged: (value) {
setState(() {
isLoggerVisible.value = value;
CustomSharedPreferences.saveDebugger(value);
});
},
),
),
);
```
---
## 🎨 Customizing Floating Logger UI
You can modify the floating logger’s UI using `widgetItemBuilder` to create a custom log display format.
```dart
return FloatingLoggerControl(
widgetItemBuilder: (index, data) {
final item = data[index];
return Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Card(
child: ListTile(
title: Text('${item.type!} [${item.response}]', style: TextStyle(fontSize: 12.0)),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("URL : ${item.path}", style: TextStyle(fontSize: 12.0)),
Text("Data : ${item.data}", style: TextStyle(fontSize: 12.0)),
Text("cURL : ${item.curl}", style: TextStyle(fontSize: 12.0)),
],
),
),
),
);
},
child: child,
);
```
## 🎨 Add Style to Floating Widget
You can easily customize the appearance of your floating logger widget by using the `style` property. This allows you to adjust the background color, tooltip, icon, and even the size of the floating widget to match your app’s theme. 🎨✨
```dart
FloatingLoggerControl(
style: FloatingLoggerStyle(
backgroundColor: Colors.green,
tooltip: "Testing",
icon: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.offline_bolt,
color: Colors.white,
size: 20,
),
Text(
"Test",
style: TextStyle(
fontSize: 8.0,
color: Colors.white,
),
),
],
),
),
child : child,
),
```
🖌️ What You Can Customize:
- `backgroundColor`: Set a vibrant color to make your floating widget stand out.
- `tooltip`: Add a custom tooltip text to provide helpful hints when hovering over the widget.
- `icon`: Choose an icon (like offline_bolt, info, etc.) and customize its size, color, and appearance.
- `size`: Adjust the size using `Size` class to adjust floating widget size.
## 🛠️ Adding a Single Custom Interceptor
To add a single custom interceptor to `DioLogger`, you can use the `addInterceptor` method. Here’s an example of adding a custom `InterceptorsWrapper` that handles the `onResponse` and `onError` events.
```dart
/// Example to add a custom single interceptor
DioLogger.instance.addInterceptor(
InterceptorsWrapper(
onResponse: (response, handler) {
// Add custom logic for onResponse
print('Custom onResponse interceptor');
handler.next(response);
},
onError: (error, handler) {
// Add custom logic for onError
print('Custom onError interceptor');
handler.next(error);
},
),
);
```
Explanation:
- `onResponse` : This is triggered when a successful response is received. You can add custom logic here, such as logging or modifying the response.
- `onError` : This is triggered when an error occurs. You can handle errors, log them, or perform recovery actions.
- `handler.next()` : This ensures the interceptor chain continues to the next interceptor or the final handler.
## 🛠️ Add List Custom Interceptor
If you want to add multiple interceptors at once, you can use the `addListInterceptor` method. This is useful when you have several interceptors that need to be applied together.
Here’s an example:
```dart
DioLogger.instance.addListInterceptor(
[
InterceptorsWrapper(
onResponse: (response, handler) {
// Add custom logic for onResponse
print('Custom onResponse interceptor');
handler.next(response);
},
onError: (error, handler) {
// Add custom logic for onError
print('Custom onError interceptor');
handler.next(error);
},
),
// You can add more interceptors in the list
],
);
```
Explanation:
- List of Interceptors: You can define multiple InterceptorsWrapper objects in a list. Each interceptor will be executed in the order they are added.
- Order Matters: The first interceptor in the list will be executed first, followed by the next, and so on.
---
## 🎯 Conclusion
`floating_logger` is a powerful tool that simplifies debugging API calls in Flutter applications. Whether you need to inspect responses, copy cURL commands, or customize the UI, this package provides a seamless experience for developers. Integrate it today and streamline your debugging process! 🚀
📌 **For more details, visit the [GitHub Repository](https://github.com/dzikrul1616/flutter_floating_logger).**
📌 **For floating logger boilerplate, visit the [Boilerplate Repository](https://github.com/dzikrul1616/floating_logger_boilerplate).**