om_console 1.0.4

A flutter console widget showing in the ui like vscode console

Om Console

Om Console is a live console for Flutter that enables viewing UI prints and HTTP requests. It integrates with Postman via curl for enhanced debugging capabilities.

Note: This package is currently in beta. While it functions well on wide screens, mobile support and the ability to copy HTTP requests as form data are still under development.

Screenshots

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  om_console: ^latest_version

Usage

1. Configure the main function

In your main.dart file:

import 'package:om_console/om_console.dart';

void main() async {
  Console.consoleLisitener(() {
    // Your app initialization code here
    runApp(MyApp());
  });
}

2. Wrap your MaterialApp or root widget

In your app's root widget:

import 'package:om_console/om_console.dart';

@override
Widget build(BuildContext context) {
  return ConsoleWrapper(
    showConsole: true,
    maxLines: 200,
    child: MaterialApp(
      home: HomePage(),
      // Other MaterialApp properties
    ),
  );
}

3. Logging with tags and colors

Use the Console.log method for custom logging:

Console.log("Your Message or Your object", type: LogType.logs, color: Colors.amber)

Note: You don't need to replace all your prints to make them show in the console. Any app prints or logs will go by default under the normal type tab in the console. Use Console.log only when you want to customize the logs.

Available LogTypes:

• normal
• error
• logs
• http

4. Logging HTTP requests

For HTTP logging, use the Console.logHttp method:

Console.logHttp(
  url: url,
  method: "Post",
  headers: response.headers ?? {},
  body: data,
  statusCode: responseBody["status"] ?? 500,
  response: responseBody,
  bodyType: BodyType.raw, // Specify how the body should be formatted in curl
  textColor: Colors.black,
  backgroundColor: responseBody["status"] == 200
      ? const Color.fromARGB(255, 207, 223, 190)
      : Color.fromARGB(255, 223, 190, 190)
);

The bodyType parameter determines how the request body is formatted in the generated curl command:

• BodyType.formData: Formats the body as multipart form data
• BodyType.xWwwFormUrlencoded: Formats the body as x-www-form-urlencoded
• BodyType.raw: Formats the body as raw data (default)

Configuration

The ConsoleWrapper method supports the following properties:

• showConsole: Boolean to toggle console visibility.
• maxLines: Integer to set the maximum number of rendered console lines, optimizing performance for large logs.

Contributing

We welcome contributions to Om Console! Please submit issues and pull requests on our GitHub repository.