floating_logger 0.0.3

floating_logger is a Flutter library that provides a floating widget for real-time API request logs.

[Live Demo]

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:

dependencies:
  floating_logger: ^latest_version

copied to clipboard

package import :

import 'package:floating_logger/floating_logger.dart';

copied to clipboard

Demo 🎥

[logo]

Check out the live demo of Floating Logger:

Preview Debug

Here is the preview of the debug console log for the HTTP request:

[logo]
Above: Example of the HTTP request.

[logo]
Middle: HTTP response log.

[logo]
Below: HTTP error log.

📖 Usage

🏗 Wrapping Your App with FloatingLoggerControl

To activate the floating logger, wrap your main widget inside FloatingLoggerControl.

return FloatingLoggerControl(
  child: Scaffold(
    appBar: AppBar(
      backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      title: const Text("Floating Logger Test"),
    ),
  ),
);

copied to clipboard

🌍 Logging API Calls with DioLogger

Replace your Dio instance with DioLogger to ensure API logs appear in the floating logger.

Future<void> 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')),
    );
  }
}

copied to clipboard

---

🎚 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

final ValueNotifier<bool> isLoggerVisible = ValueNotifier<bool>(true);

@override
void initState() {
  loadLoggerSettings();
  super.initState();
}

Future<void> loadLoggerSettings() async {
  try {
    bool pref = await getStoredPreference();
    setState(() {
      isLoggerVisible.value = pref;
    });
  } catch (e) {
    print(e);
  }
}

Future<bool> getStoredPreference() async {
  return await CustomSharedPreferences.getDebugger();
}

copied to clipboard

📌 Apply Preferences in FloatingLoggerControl

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);
        });
      },
    ),
  ),
);

copied to clipboard

---

🎨 Customizing Floating Logger UI

You can modify the floating logger’s UI using widgetItemBuilder to create a custom log display format.

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,
);

copied to clipboard

---

🎯 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.