add tutorial docs in examples

example/lib/custom_message.dart

@@ -1,12 +1,28 @@
 import 'package:flutter/material.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
+/// Fifth step of the [tutorial](https://getstream.io/chat/flutter/tutorial/)
+///
+/// Customizing how messages are rendered is another very common use-case that the SDK supports easily.
+///
+/// Replace the built-in message component with your own is done by passing it as a builder function to the [MessageListView] widget.
+///
+/// The message builder function will get the usual [BuildContext] argument as well as the [Message] object and its position inside the list.
+///
+/// If you look at the code you can see that we use [StreamChat.of] to retrieve the current user so that we can style messages own messages in a different way.
+///
+/// Since custom widgets and builders are always children of [StreamChat] or part of a [Channel],
+/// you can use [StreamChat.of], [StreamChannel.of] and [StreamChatTheme.of] to use the API client directly
+/// or to retrieve outer scope needed such as messages from the [Channel.state].
 void main() async {
-  final client = Client('qk4nn7rpcn75');
+  final client = Client(
+    'b67pax5b2wdq',
+    logLevel: Level.INFO,
+  );
 
   await client.setUser(
-    User(id: 'wild-breeze-7'),
-    'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoid2lsZC1icmVlemUtNyJ9.VM2EX1EXOfgqa-bTH_3JzeY0T99ngWzWahSauP3dBMo',
+    User(id: 'falling-mountain-7'),
+    'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoiZmFsbGluZy1tb3VudGFpbi03In0.AKgRXHMQQMz6vJAKszXdY8zMFfsAgkoUeZHlI-Szz9E',
   );
 
   runApp(MyApp(client));