{"id":24759989,"url":"https://github.com/dzikrul1616/flutter_floating_logger","last_synced_at":"2025-03-23T10:44:39.019Z","repository":{"id":274568925,"uuid":"923342057","full_name":"dzikrul1616/flutter_floating_logger","owner":"dzikrul1616","description":"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.","archived":false,"fork":false,"pushed_at":"2025-02-16T02:56:24.000Z","size":12155,"stargazers_count":17,"open_issues_count":0,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-19T23:16:25.177Z","etag":null,"topics":["curl","dart","flutter","json","logger","rest-api"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/floating_logger","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dzikrul1616.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-28T04:02:45.000Z","updated_at":"2025-02-16T02:56:27.000Z","dependencies_parsed_at":"2025-01-28T05:19:31.574Z","dependency_job_id":"58f0012b-2fa8-406f-a101-4ab8926dc12a","html_url":"https://github.com/dzikrul1616/flutter_floating_logger","commit_stats":null,"previous_names":["dzikrul1616/floating_logger"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dzikrul1616%2Fflutter_floating_logger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dzikrul1616%2Fflutter_floating_logger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dzikrul1616%2Fflutter_floating_logger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dzikrul1616%2Fflutter_floating_logger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dzikrul1616","download_url":"https://codeload.github.com/dzikrul1616/flutter_floating_logger/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245090865,"owners_count":20559296,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["curl","dart","flutter","json","logger","rest-api"],"created_at":"2025-01-28T17:17:46.125Z","updated_at":"2025-03-23T10:44:39.012Z","avatar_url":"https://github.com/dzikrul1616.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/dzikrul1616/flutter_floating_logger/blob/main/images/logger%20logo.png?raw=true\" alt=\"Logo Floating Logger\" /\u003e\n  \u003cbr /\u003e\n\n  \u003ca href=\"https://app.codecov.io/gh/dzikrul1616/flutter_floating_logger\"\u003e\n    \u003cimg src=\"https://codecov.io/gh/dzikrul1616/flutter_floating_logger/branch/main/graph/badge.svg\" alt=\"Codecov\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://pub.dev/packages/floating_logger/score\"\u003e\n    \u003cimg src=\"https://img.shields.io/pub/points/floating_logger\" alt=\"Pub Points\" /\u003e\n  \u003c/a\u003e\n\n  \u003cbr /\u003e\n  \u003ca href=\"https://github.com/dzikrul1616/flutter_floating_logger\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/dzikrul1616/flutter_floating_logger?style=social\" alt=\"Stars\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/dzikrul1616/flutter_floating_logger/actions/workflows/testing.yml\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/actions/workflow/status/dzikrul1616/flutter_floating_logger/testing.yml?label=CI\u0026style=social\" alt=\"GitHub Actions\" /\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/badge/pub-v0.1.3-orange.svg\" alt=\"Version\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg\" alt=\"License\" /\u003e\n  \u003ca href=\"https://github.com/dzikrul1616/flutter_floating_logger/issues\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Issues-Open-brightgreen.svg\" alt=\"Issues\" /\u003e\n  \u003c/a\u003e\n\n  \u003cbr /\u003e\n  \u003ca href=\"https://dzikrul1616.github.io/preview_floating_logger.github.io/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Live-Demo-brightgreen?style=for-the-badge\" alt=\"Live Demo\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n# floating_logger 🚀\n\n**`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! ⚡\n\n## 📌 Features\n\n- 🎨 **Beautify Debugger Console** - Improved readability for logs\n- 📜 **Beautify JSON Response Item** - Better JSON formatting\n- 📋 **Copy cURL (Long Tap)** - Easily copy API requests\n- 🎈 **Floating Button (Flexible Logger)** - Moveable debugging widget\n- 🔄 **Preferences for Global Hide/Show** - Toggle visibility globally\n- 🔧 **Custom Item List** - Customize how log items are displayed\n\n## Installation 🔧\n\nTo get started, add `floating_logger` to your `pubspec.yaml`:\n\n```yaml\ndependencies:\n  floating_logger: ^latest_version\n\n```\npackage import :\n\n```dart \nimport 'package:floating_logger/floating_logger.dart';\n```\n\n\n## Demo 🎥\n\n![logo](https://github.com/dzikrul1616/flutter_floating_logger/blob/main/images/preview.gif?raw=true)\n\n\u003cdiv align=\"center\"\u003e\n\nCheck out the live demo of **Floating Logger**:  \n\n[![Live Demo](https://img.shields.io/badge/Live-Demo-brightgreen?style=for-the-badge)](https://dzikrul1616.github.io/preview_floating_logger.github.io/)\n\n\u003c/div\u003e\n\n\n## Preview Debug\n\nHere is the preview of the debug console log for the HTTP request:\n\n![logo](https://github.com/dzikrul1616/flutter_floating_logger/blob/main/images/%5BGET%5Drequest_debug_api.png?raw=true)  \n*Above: Example of the HTTP request.*\n\n![logo](https://github.com/dzikrul1616/flutter_floating_logger/blob/main/images/%5BGET%5Dresponse_debug_api.png?raw=true)  \n*Middle: HTTP response log.*\n\n![logo](https://github.com/dzikrul1616/flutter_floating_logger/blob/main/images/%5BGET%5Derror_debug_api.png?raw=true)  \n*Below: HTTP error log.*\n\n\n## 📖 Usage\n\n### 🏗 Wrapping Your App with `FloatingLoggerControl`\nTo activate the floating logger, wrap your main widget inside `FloatingLoggerControl`.\n\n```dart\nreturn FloatingLoggerControl(\n  child: Scaffold(\n    appBar: AppBar(\n      backgroundColor: Theme.of(context).colorScheme.inversePrimary,\n      title: const Text(\"Floating Logger Test\"),\n    ),\n  ),\n);\n```\n\n### 🌍 Logging API Calls with `DioLogger`\nReplace your `Dio` instance with `DioLogger` to ensure API logs appear in the floating logger.\n\n```dart\nFuture\u003cvoid\u003e fetchData() async {\n  try {\n    final response = await DioLogger.instance.get(\n      'https://api.genderize.io',\n      queryParameters: { \"name\": \"james\" },\n    );\n    if (response.statusCode == 200) {\n      // Handle API response\n    }\n  } catch (e) {\n    ScaffoldMessenger.of(context).showSnackBar(\n      SnackBar(content: Text('API request failed')),\n    );\n  }\n}\n```\n\n---\n\n## 🎚 Toggle Floating Logger Visibility Using Preferences\nUse `ValueNotifier` to toggle the logger visibility dynamically. This allows you to enable or disable the logger and persist the setting across app sessions.\n\n### 📌 Define the Visibility Notifier\n```dart\nfinal ValueNotifier\u003cbool\u003e isLoggerVisible = ValueNotifier\u003cbool\u003e(true);\n\n@override\nvoid initState() {\n  loadLoggerSettings();\n  super.initState();\n}\n\nFuture\u003cvoid\u003e loadLoggerSettings() async {\n  try {\n    bool pref = await getStoredPreference();\n    setState(() {\n      isLoggerVisible.value = pref;\n    });\n  } catch (e) {\n    print(e);\n  }\n}\n\nFuture\u003cbool\u003e getStoredPreference() async {\n  return await CustomSharedPreferences.getDebugger();\n}\n```\n\n### 📌 Apply Preferences in `FloatingLoggerControl`\n```dart\nreturn FloatingLoggerControl(\n  getPreference: getStoredPreference,\n  isShow: isLoggerVisible,\n  child: Scaffold(\n    appBar: AppBar(title: Text(\"Logger Toggle Test\")),\n    body: Switch(\n      activeTrackColor: Colors.blue,\n      value: isLoggerVisible.value,\n      onChanged: (value) {\n        setState(() {\n          isLoggerVisible.value = value;\n          CustomSharedPreferences.saveDebugger(value);\n        });\n      },\n    ),\n  ),\n);\n```\n\n---\n\n## 🎨 Customizing Floating Logger UI\nYou can modify the floating logger’s UI using `widgetItemBuilder` to create a custom log display format.\n\n```dart\nreturn FloatingLoggerControl(\n  widgetItemBuilder: (index, data) {\n    final item = data[index];\n    return Padding(\n      padding: const EdgeInsets.only(bottom: 10),\n      child: Card(\n        child: ListTile(\n          title: Text('${item.type!} [${item.response}]', style: TextStyle(fontSize: 12.0)),\n          subtitle: Column(\n            crossAxisAlignment: CrossAxisAlignment.start,\n            children: [\n              Text(\"URL   : ${item.path}\", style: TextStyle(fontSize: 12.0)),\n              Text(\"Data  : ${item.data}\", style: TextStyle(fontSize: 12.0)),\n              Text(\"cURL  : ${item.curl}\", style: TextStyle(fontSize: 12.0)),\n            ],\n          ),\n        ),\n      ),\n    );\n  },\n  child: child,\n);\n```\n\n## 🎨 Add Style to Floating Widget\n\nYou 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. 🎨✨\n\n```dart\nFloatingLoggerControl(\n      style: FloatingLoggerStyle(\n        backgroundColor: Colors.green,\n        tooltip: \"Testing\",\n        icon: Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: [\n            Icon(\n              Icons.offline_bolt,\n              color: Colors.white,\n              size: 20,\n            ),\n            Text(\n              \"Test\",\n              style: TextStyle(\n                fontSize: 8.0,\n                color: Colors.white,\n              ),\n            ),\n          ],\n        ),\n      ),\n      child : child,\n),\n```\n🖌️ What You Can Customize:\n- `backgroundColor`: Set a vibrant color to make your floating widget stand out.\n- `tooltip`: Add a custom tooltip text to provide helpful hints when hovering over the widget.\n- `icon`: Choose an icon (like offline_bolt, info, etc.) and customize its size, color, and appearance.\n- `size`: Adjust the size using `Size` class to adjust floating widget size.\n\n## 🛠️ Adding a Single Custom Interceptor\n\nTo 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.\n\n```dart\n/// Example to add a custom single interceptor\nDioLogger.instance.addInterceptor(\n  InterceptorsWrapper(\n    onResponse: (response, handler) {\n      // Add custom logic for onResponse\n      print('Custom onResponse interceptor');\n      handler.next(response);\n    },\n    onError: (error, handler) {\n      // Add custom logic for onError\n      print('Custom onError interceptor');\n      handler.next(error);\n    },\n  ),\n);\n```\nExplanation:\n- `onResponse` : This is triggered when a successful response is received. You can add custom logic here, such as logging or modifying the response.\n- `onError` : This is triggered when an error occurs. You can handle errors, log them, or perform recovery actions.\n- `handler.next()` : This ensures the interceptor chain continues to the next interceptor or the final handler.\n\n## 🛠️ Add List Custom Interceptor\n\nIf 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.\n\nHere’s an example:\n\n```dart\nDioLogger.instance.addListInterceptor(\n  [\n    InterceptorsWrapper(\n      onResponse: (response, handler) {\n        // Add custom logic for onResponse\n        print('Custom onResponse interceptor');\n        handler.next(response);\n      },\n      onError: (error, handler) {\n        // Add custom logic for onError\n        print('Custom onError interceptor');\n        handler.next(error);\n      },\n    ),\n    // You can add more interceptors in the list\n  ],\n);\n```\nExplanation:\n- List of Interceptors: You can define multiple InterceptorsWrapper objects in a list. Each interceptor will be executed in the order they are added.\n- Order Matters: The first interceptor in the list will be executed first, followed by the next, and so on.\n\n---\n\n## 🎯 Conclusion\n`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! 🚀\n\n📌 **For more details, visit the [GitHub Repository](https://github.com/dzikrul1616/flutter_floating_logger).**\n📌 **For floating logger boilerplate, visit the [Boilerplate Repository](https://github.com/dzikrul1616/floating_logger_boilerplate).**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdzikrul1616%2Fflutter_floating_logger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdzikrul1616%2Fflutter_floating_logger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdzikrul1616%2Fflutter_floating_logger/lists"}