Onscreen Ui Debugger enables user to log on or print on screens

Features

Onscreen Ui Debugger can create logs on screen in few simple steps.

Getting started

Add the package in pubspec.yaml and check below code.

Usage

Add below code to your MaterialApp.

builder: (context, child) {
    return Stack(
        children: [
            child ?? Container(),
            Overlay(
                initialEntries: [
                    OverlayEntry(
                        builder: (context) => const DebugWidget(),
                    ),
                ],
            ),
        ],
    );
},

After adding the above code your MaterialApp should like this.

MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
    ),
    //----------Changes starts from here ----------
    builder: (context, child) {
        return Stack(
            children: [
                child ?? Container(),
                Overlay(
                    initialEntries: [
                        OverlayEntry(
                        builder: (context) => const DebugWidget(),
                        ),
                    ],
                ),
            ],
        );
    },
    //----------Changes Ends here ----------
    home: const MyHomePage(title: 'Flutter Demo Home Page'),
    )

Below is the formate to log.

DebugLog debugLog = DebugLog(logTitle: "Login Rest Api", dateTime: DateTime.now());
debugLog.logStrings.add(DebugLogString(logTitle: "Login Request", logsDescription: "{mobile:'9496699210'}"));
debugLog.logStrings.add(DebugLogString(logTitle: "Response", logsDescription: '{message:'success'}'));
debugLog.setAsBlue(); // Tile color
DebugUtils.debugLogBloc.addDebugLog(debugLog);

Additional information

For additional information contact us at nikhilishwar2@gmail.com. We welcome more contributors on this project.