fix: update readme (#278)

+<a href="https://jamesblasco.github.io/modal_bottom_sheet/#/"><img src="https://github.com/jamesblasco/modal_bottom_sheet/blob/screenshots/preview.png?raw=true"></a>
+
+# A modal bottom sheet for your Flutter app
+
+[![Awesome Flutter](https://img.shields.io/badge/Awesome-Flutter-blue.svg?longCache=true&style=flat-square)](https://github.com/Solido/awesome-flutter)
+[![Pub](https://img.shields.io/pub/v/modal_bottom_sheet.svg?logo=flutter&color=blue&style=flat-square)](https://pub.dev/packages/modal_bottom_sheet)
+
+Check the package [README](https://github.com/jamesblasco/modal_bottom_sheet/tree/main/modal_bottom_sheet) for more information
+
+### Sheet (Experimental)
+
+[Sheet](https://github.com/jamesblasco/modal_bottom_sheet/tree/main/sheet) is a new package that reimplements the modal bottom sheet behavior from scratch. It is expected to be easier to use, more performant, more stable, more customaziable and with more features. It is used in several released apps already. If you want to be part of it, I encourge you to give it a try and provide any feedback you might have :)
+
+
+
+

-# Sheet
+<img src="https://github.com/jamesblasco/modal_bottom_sheet/docs/assets/sheet.png?raw=true">
+
+
+# Sheet Package
+
+[![Pub](https://img.shields.io/pub/v/sheet.svg?logo=flutter&color=blue&style=flat-square)](https://pub.dev/packages/sheet)
 
 
 A fully customizable draggable bottom sheet for Flutter
 A fully customizable draggable bottom sheet for Flutter
 
 
+Sheet is a new package that intends to replace [modal_bottom_sheet](https://pub.dev/packages/modal_bottom_sheet) in a near future 
+
+It allows to add a [Sheet] widget to any page or push a new [SheetRoute] to your navigator.
+
 ## Getting Started
 ## Getting Started
 
 
+Add the sheet package to your pubspec 
+
+```sh
+flutter pub add sheet 
+```
+
+Learn more about:
+  - Using [Sheet](modal_bottom_sheet/tree/main/sheet#sheet) to create bottom sheets inside your page
+  - Using [SheetRoute](modal_bottom_sheet/tree/main/sheet#sheetroute) or `SheetPage` to push a new modal bottom sheet route
+
+## Sheet
+
 ```dart
 ```dart
 Sheet(
 Sheet(
  initialExtent: 200,
  initialExtent: 200,
@@ -11,7 +32,7 @@ Sheet(
 )
 )
 ```
 ```
 
 
-You can add it above any widget 
+You can add it above any other widget. Usually you might want to use a Stack for that
 
 
 ```dart
 ```dart
 Stack(
 Stack(
@@ -28,64 +49,76 @@ Stack(
 
 
 The widget has several parameters that allow fully costumization of the sheet
 The widget has several parameters that allow fully costumization of the sheet
 
 
-# Add an initial position
+#### Add an initial position
+
+Use `initialExtent` to set a initial offset from the bottom
+
+```dart
 Sheet(
 Sheet(
  initialExtent: 200,
  initialExtent: 200,
  child: Container(color: Colors.blue[100]),
  child: Container(color: Colors.blue[100]),
 )
 )
+```
+
+#### Clamp the sheet between a min and maximun values
 
 
+You can set a `minExtent` and `maxExtent` to limit the position of the Sheet between those values
 
 
-# Clamp the sheet between a min and maximun values
+```dart
 Sheet(
 Sheet(
  initialExtent: 200,
  initialExtent: 200,
  minExtent: 100,
  minExtent: 100,
  maxExtent: 400,
  maxExtent: 400,
  child: Container(color: Colors.blue[100]),
  child: Container(color: Colors.blue[100]),
 )
 )
+```
 
 
 
 
-# Set a space value of interaction
+#### Allow to open the sheet when is fully hidden
 
 
-When the sheet is hidden you might wanna allow the user to drag up the
-bottom sheet even if this one is no visible. You can define an area where
-the interaction can be detected
+When the sheet is hidden you might wanna allow the user to drag up the bottom sheet even if this one is no visible. You can define an area where the interaction can be detected
 
 
+```dart
 Sheet(
 Sheet(
  initialExtent: 0,
  initialExtent: 0,
  minInteractionExtent: 20,
  minInteractionExtent: 20,
  child: Container(color: Colors.blue[100]),
  child: Container(color: Colors.blue[100]),
 )
 )
+```
 
 
 
 
-# Fit modes
+#### Fit modes
 
 
-By default the sheet height will be the minimun between the max available height and the 
-one recommended by the child.
+By default the sheet height will be the minimun between the max available height and the one recommended by the child.
 
 
 It is possible to force the sheet child to be the maxium size available by setting  `SheetFit.expand`
 It is possible to force the sheet child to be the maxium size available by setting  `SheetFit.expand`
 
 
+```dart
 Sheet(
 Sheet(
  initialExtent: 200,
  initialExtent: 200,
  fit: SheetFit.expand,
  fit: SheetFit.expand,
  child: Container(color: Colors.blue[100]),
  child: Container(color: Colors.blue[100]),
 )
 )
+```
 
 
-# Resizable
+#### Resizable
 
 
-By default the sheet has a fixed sized and it is translated according to the user scroll.
+By default the sheet has a fixed sized and it is vertically translated according to the user drag.
 It is posible to make the sheet change the height of the child by setting `resize: true`
 It is posible to make the sheet change the height of the child by setting `resize: true`
 This will force the child to fit the available visual space.
 This will force the child to fit the available visual space.
 
 
+```dart
 Sheet(
 Sheet(
  initialExtent: 200,
  initialExtent: 200,
  resizable:true
  resizable:true
  child: Container(color: Colors.blue[100]),
  child: Container(color: Colors.blue[100]),
 )
 )
+```
 
 
-# Resizable with min size extent
+#### Resizable with min size extent
 
 
 It is possible to set a min height for a resizable sheet. When the height reaches that min value, the sheet 
 It is possible to set a min height for a resizable sheet. When the height reaches that min value, the sheet 
-will start translating instead of shrinking
+will start vertically translating instead of shrinking
 
 
 ```dart
 ```dart
 Sheet(
 Sheet(
@@ -96,7 +129,7 @@ Sheet(
 ```
 ```
 
 
 
 
-# Control the position of the sheet
+#### Control the position of the sheet
 
 
 It is possible to pass a `SheetController` to control programatically the position of the sheet.
 It is possible to pass a `SheetController` to control programatically the position of the sheet.
 
 
@@ -117,8 +150,7 @@ controller.animateTo(400, ...);
 controller.relativeAnimateTo(1, ...); // Value between 0 and 1
 controller.relativeAnimateTo(1, ...); // Value between 0 and 1
 ```
 ```
 
 
-The sheet controller also contains an animation value that can be used
-to animate other parts of the ui in sync
+The sheet controller also contains an animation value that can be used to animate other parts of the ui in sync
 
 
 ```dart
 ```dart
 AnimatedBuilder(
 AnimatedBuilder(
@@ -129,5 +161,53 @@ AnimatedBuilder(
 );
 );
 ```
 ```
 
 
-The sheet controller also contains an animation value that can be used
-to animate other parts of the ui in sync
+
+## Sheet Route
+
+You can push a new modal bottom sheet route above your current page using `SheetRoute`
+
+
+```dart
+SheetRoute<void>(
+  builder: (BuildContext) => Container(),
+)
+```
+
+Or you can also use `SheetPage` with the Navigator 2.0
+
+```dart
+Navigator(
+  pages: <Page<dynamic>>[
+    MaterialPage<bool>(
+      key: const ValueKey<String>('BooksListPage'),
+      child: BooksListScreen(
+        books: books,
+        onTapped: _handleBookTapped,
+      ),
+    ),
+    if (_selectedBook != null)
+      SheetPage<void>(
+          key: ValueKey<Book?>(_selectedBook),
+          child: BookDetailsScreen(book_selectedBook!),
+          barrierColor: Colors.black26,
+      )
+  ],
+)
+```
+
+An example using [GoRouter](https://pub.dev/packages/go_router) is available [here](https://github.com/jamesblasco/modal_bottom_sheet/blob/main/sheet/example/lib/examples/route/navigation/go_router.dart)
+
+
+
+#### Set the initial position
+
+Use `initialExtent` to set the initial position the bottom sheet will be dragged to:
+
+```dart
+SheetRoute(
+ initialExtent: 200,
+ builder: (BuildContext) => Container(color: Colors.blue[100]),
+)
+```
+
+TBD