Update talker_dio_logger and talker_bloc_logger docs

packages/talker_bloc_logger/README.md

@@ -17,6 +17,14 @@ Lightweight and customizable [BLoC](https://pub.dev/packages/bloc) state managem
 This is how the logs of your BLoC's event callign and state emits will look in the console
 ![](https://github.com/Frezyx/talker/blob/dev/docs/assets/talker_bloc_logger/preview.png?raw=true)
 
+<p align="center">For better understanding how it works check <a href="https://frezyx.github.io/talker">
+Web Demo</a> page</p>
+<p align="center">
+<a href="https://frezyx.github.io/talker">
+  <img src="https://github.com/Frezyx/talker/blob/dev/docs/assets/check_web_demo.png?raw=true" width="250px">
+</a>
+</p>
+
 ## Getting started
 Follow these steps to use this package
 

packages/talker_dio_logger/README.md

@@ -17,7 +17,15 @@ Lightweight and customizable [dio](https://pub.dev/packages/dio) http client log
 This is how the logs of your http requests will look in the console
 ![](https://github.com/Frezyx/talker/blob/dev/docs/assets/talker_dio_logger/preview_new.png?raw=true)
 
-## Getting started
+<p align="center">For better understanding how it works check <a href="https://frezyx.github.io/talker">
+Web Demo</a> page</p>
+<p align="center">
+<a href="https://frezyx.github.io/talker">
+  <img src="https://github.com/Frezyx/talker/blob/dev/docs/assets/check_web_demo.png?raw=true" width="250px">
+</a>
+</p>
+
+### Getting started
 Follow these steps to use this package
 
 ### Add dependency
@@ -42,25 +50,71 @@ dio.interceptors.add(
 );
 ```
 
-## Using with Talker
-You can add your talker instance for TalkerDioLogger if your app already uses Talker.
+## Customization
 
-In this case, all logs and errors will fall into your unified tracking system
+To provide hight usage exp here are a lot of settings and customization fields in TalkerDioLoggerSettings. You can setup all wat you want. For example: 
+
+### Off/on http request or reposnse logs
+
+You can toggle reponse / request printing and headers including
 
 ```dart
-final talker = Talker();
 final dio = Dio();
 dio.interceptors.add(
     TalkerDioLogger(
-        talker: talker,
         settings: const TalkerDioLoggerSettings(
-          printRequestHeaders: true,
+          // All http responses enabled for console logging
+          printResponseData: true,
+          // All http requests disabled for console logging
+          printRequestData: false,
+          // Reposnse logs including http - headers
           printResponseHeaders: true,
+          // Request logs without http - headersa
+          printRequestHeaders: false,
         ),
     ),
 );
 ```
 
+### Change http logs colors
+
+Setup your custom http-log colors. You can set color for requests, responses and errors in TalkerDioLoggerSettings
+
+```dart
+TalkerDioLoggerSettings(
+  // Blue http requests logs in console
+  requestPen: AnsiPen()..blue(),
+  // Green http responses logs in console
+  responsePen: AnsiPen()..green(),
+  // Error http logs in console
+  errorPen: AnsiPen()..red(),
+);
+```
+
+### Filter http logs
+
+For example if your app has a private functionality and you don't need to store this functionality logs in talker - you can use filters
+
+```dart
+TalkerDioLoggerSettings(
+  // All http request without "/secure" in path will be printed in console 
+  requestFilter: (RequestOptions options) => !options.path.contains('/secure'),
+  // All http responses with status codes different than 301 will be printed in console 
+  responseFilter: (response) => response.statusCode != 301,
+)
+```
+
+## Using with Talker
+You can add your talker instance for TalkerDioLogger if your app already uses Talker.
+In this case, all logs and errors will fall into your unified tracking system
+
+```dart
+final talker = Talker();
+final dio = Dio();
+dio.interceptors.add(TalkerDioLogger(talker: talker));
+```
+
+
 ## Additional information
 The project is under development and ready for your pull-requests and issues 👍<br>
 Thank you for support ❤️