Flutter On-Screen Logger

A Flutter package that allows you to display logs on the screen of your app for easier debugging.

Features

• Log exceptions and errors in a user-friendly way.
• Easily integrate with Dio for HTTP request logging.
• Simple API for logging custom messages.
• Customizable display options for logs.

Getting Started

1. Add the package to your pubspec.yaml file:

   dependencies:
     flutter_onscreen_logger: ^1.0.0
   

2. Configure your main.dart to integrate the library:

   • Wrap your runApp() method in main() with runZonedGuarded() to handle errors globally.
   • In the onError() function, call the logger's onError() method.

   main() {
     runZonedGuarded(() async {
       WidgetsFlutterBinding.ensureInitialized();
   
       // No need for .init() anymore, it's handled automatically.
   
       //...other code...
          
       runApp(MyApp());
     }, (error, stack) {
       OnscreenLogger.onError();
     });
   }
   

   • Wrap your MaterialApp() widget with a Stack() and Directionality() widgets.
   • Add LoggerOverlayWidget() widget below it.
   • Note: You can conditionally show/hide the on-screen logger based on your use case. For example, you can set the widget to only show in debug mode (Recommended).

   Directionality(
      textDirection: TextDirection.ltr, 
      child: Stack(
          children: [
            MaterialApp(
              //...other material app properties...
              home: MyHomePage(title: 'MyApp'),
            ),
            if (BuildConfig.showOnScreenLogger) LoggerOverlayWidget(),
          ],
        ),
    );
   

Usage

You can use the on-screen logger to log your own custom message throughout your project using the following methods:

e() - Log Errors

Logs error messages with a red color.

OnScreenLog.e(
  title: 'Network Error',
  message: 'Unable to fetch data from server.',
);

i() - Log Info

Logs info messages with a white color.

OnScreenLog.i(
  title: 'API Response Received!',
  message: '* API Response:\n$data',
);

s() - Log Success

Logs success messages with a green color.

OnScreenLog.s(
  title: 'Login Successful',
  message: 'User has logged in successfully.',
);

w() - Log Warnings

Logs warning messages with a orange color.

OnScreenLog.w(
  title: 'Low Disk Space',
  message: 'Disk space is running low, consider cleaning up.',
);

shareAll() - Share All Logs

Allows you to share all the log entries that have been captured so far. This method will gather the logs and open a sharing interface for the user to share the log messages.

OnScreenLog.shareAll();

clearAll() - Clear All Logs

Clears all log entries currently stored in the logger, effectively resetting the log data. This is useful if you want to start a new logging session or remove sensitive log data.

OnScreenLog.clearAll();