dio_http_formatter 1.0.2

Dart native js
Flutter Android iOS web

A Dio interceptor for pretty printing the HTTP request/response to be printed in the console for easier debugging

A simple Dio interceptor for pretty printing the HTTP request/response (using the awesome package Logger) to be printed in the console for easier debugging and sharing.

Different content types are supported and pretty printed such as:

  • application/json
  • application/x-www-form-urlencoded
  • text/html

Getting started #

1- Install the package in your project:

flutter pub get dio_http_formatter

or if not for Flutter:

pub get dio_http_formatter

2- Add the interceptor to your Dio instance like:

final _dio = Dio();
_dio.interceptors.add(HttpFormatter());

Options #

Below are the optional parameters that can be specified for the formatter to customize what and how the HTTP request and response is printed.

PropertyTypeDefault Value
includeRequestbooltrue
includeRequestHeadersbooltrue
includeRequestBodybooltrue
includeResponsebooltrue
includeResponseHeadersbooltrue
includeResponseBodybooltrue
loggerLoggerPrettyPrinter()

Examples #

POST request [application/json] #

  await _dio.post('https://postman-echo.com/post',
      data: <String, dynamic>{'foo': 'foo'},
      options: Options()
        ..headers = <String, dynamic>{
          'my-custom-header': 'my-custom-header',
          'content-type': 'application/json'
        });
┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
│ ⤴ REQUEST ⤴
│ 
│ POST https://postman-echo.com/post
│ content-type: application/json
│ my-custom-header: my-custom-header
│ content-length: 13
│ 
│ 
│ {
│   "foo": "foo"
│ }
│ 
│ ⤵ RESPONSE [200/OK] [Time elapsed: 1080 ms]⤵
│ 
│ connection: [keep-alive]
│ set-cookie: [sails.sid=s%3AlO2moZlJ_-LGJZdq_o0KRpliqamhCecq.lNnUP5X%2Fvr%2BXi2an7q6GJki9DPmDQyPAyBW7p117ijM; Path=/; HttpOnly]
│ date: [Mon, 22 Jun 2020 17:29:07 GMT]
│ vary: [Accept-Encoding]
│ content-length: [417]
│ etag: [W/"1a1-14yzanqIFzi16qAA3YVbkp9Acl8"]
│ content-type: [application/json; charset=utf-8]
│ 
│ 
│ {
│   "args": {},
│   "data": {
│     "foo": "foo"
│   },
│   "files": {},
│   "form": {},
│   "headers": {
│     "x-forwarded-proto": "https",
│     "x-forwarded-port": "443",
│     "host": "postman-echo.com",
│     "x-amzn-trace-id": "Root=1-5ef0ea63-50bc2440e0e07883458a067f",
│     "content-length": "13",
│     "user-agent": "Dart/2.8 (dart:io)",
│     "content-type": "application/json",
│     "my-custom-header": "my-custom-header",
│     "accept-encoding": "gzip"
│   },
│   "json": {
│     "foo": "foo"
│   },
│   "url": "https://postman-echo.com/post"
│ }
└───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

Successful GET request [text/html] #

await _dio.get('https://example.org');
┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
│ ⤴ REQUEST ⤴
│ 
│ GET https://example.org
│ 
│ 
│ ⤵ RESPONSE [200/OK] [Time elapsed: 963 ms]⤵
│ 
│ cache-control: [max-age=604800]
│ last-modified: [Thu, 17 Oct 2019 07:18:26 GMT]
│ date: [Mon, 22 Jun 2020 17:34:41 GMT]
│ content-encoding: [gzip]
│ vary: [Accept-Encoding]
│ age: [336678]
│ content-type: [text/html; charset=UTF-8]
│ server: [ECS (dcb/7FA3)]
│ accept-ranges: [bytes]
│ content-length: [648]
│ etag: ["3147526947"]
│ x-cache: [HIT]
│ expires: [Mon, 29 Jun 2020 17:34:41 GMT]
│ 
│ 
│ <!doctype html>
│ <html>
│ <head>
│     <title>Example Domain</title>
│ 
│     <meta charset="utf-8" />
│     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
│     <meta name="viewport" content="width=device-width, initial-scale=1" />
│     <style type="text/css">
│     body {
│         background-color: #f0f0f2;
│         margin: 0;
│         padding: 0;
│         font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
│         
│     }
│     div {
│         width: 600px;
│         margin: 5em auto;
│         padding: 2em;
│         background-color: #fdfdff;
│         border-radius: 0.5em;
│         box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);
│     }
│     a:link, a:visited {
│         color: #38488f;
│         text-decoration: none;
│     }
│     @media (max-width: 700px) {
│         div {
│             margin: 0 auto;
│             width: auto;
│         }
│     }
│     </style>    
│ </head>
│ 
│ <body>
│ <div>
│     <h1>Example Domain</h1>
│     <p>This domain is for use in illustrative examples in documents. You may use this
│     domain in literature without prior coordination or asking for permission.</p>
│     <p><a href="https://www.iana.org/domains/example">More information...</a></p>
│ </div>
│ </body>
│ </html>
│ 
└───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
3
likes
110
pub points
36%
popularity

A Dio interceptor for pretty printing the HTTP request/response to be printed in the console for easier debugging

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

assem905@gmail.com

License

MIT (LICENSE)

Dependencies

dio, logger

More

Packages that depend on dio_http_formatter