flutter_onscreen_logger 2.0.1 copy "flutter_onscreen_logger: ^2.0.1" to clipboard
flutter_onscreen_logger: ^2.0.1 copied to clipboard

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

Flutter On-Screen Logger #

Pub Package Pub Package GitHub Repo stars

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

flutter_onscreen_logger

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();
8
likes
150
points
37
downloads

Publisher

unverified uploader

Weekly Downloads

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter, fluttertoast, get, intl, path_provider, share_plus

More

Packages that depend on flutter_onscreen_logger