#55 doc: Update documentation and examples (#56)

AdamJonsson · Apr 22, 2021 · 34eb426 · 34eb426
1 parent f46832b
commit 34eb426
Show file tree

Hide file tree

Showing 5 changed files with 216 additions and 85 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
 [![likes](https://badges.bar/snapping_sheet/likes)](https://pub.dev/packages/snapping_sheet/score)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-A package that provides a highly customizable sheet widget that snaps to different vertical positions
+A package that provides a highly customizable sheet widget that snaps to different vertical & horizontal positions
 </br></br>
 <table >
     <tr>

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -1,15 +1,114 @@
-import 'package:example/pages/horizontal_example.dart';
-import 'package:example/pages/placeholder_example.dart';
-import 'package:example/pages/preview_page.dart';
+import 'package:example/pages/menu.dart';
 import 'package:flutter/material.dart';
-
-import 'pages/preview_reverse_page.dart';
+import 'package:snapping_sheet/snapping_sheet.dart';
 
 void main() {
-  runApp(SnappingSheetExample());
+  runApp(SnappingSheetExampleApp());
+}
+
+class SimpleSnappingSheet extends StatelessWidget {
+  final ScrollController listViewController = new ScrollController();
+
+  @override
+  Widget build(BuildContext context) {
+    return SnappingSheet(
+      child: Background(),
+      lockOverflowDrag: true,
+      snappingPositions: [
+        SnappingPosition.factor(
+          positionFactor: 0.0,
+          snappingCurve: Curves.easeOutExpo,
+          snappingDuration: Duration(seconds: 1),
+          grabbingContentOffset: GrabbingContentOffset.top,
+        ),
+        SnappingPosition.factor(
+          snappingCurve: Curves.elasticOut,
+          snappingDuration: Duration(milliseconds: 1750),
+          positionFactor: 0.5,
+        ),
+        SnappingPosition.factor(
+          grabbingContentOffset: GrabbingContentOffset.bottom,
+          snappingCurve: Curves.easeInExpo,
+          snappingDuration: Duration(seconds: 1),
+          positionFactor: 0.9,
+        ),
+      ],
+      grabbing: GrabbingWidget(),
+      grabbingHeight: 75,
+      sheetAbove: null,
+      sheetBelow: SnappingSheetContent(
+        draggable: true,
+        childScrollController: listViewController,
+        child: Container(
+          color: Colors.white,
+          child: ListView.builder(
+            controller: listViewController,
+            itemBuilder: (context, index) {
+              return Container(
+                margin: EdgeInsets.all(15),
+                color: Colors.green[200],
+                height: 100,
+                child: Center(
+                  child: Text(index.toString()),
+                ),
+              );
+            },
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// Widgets below are just helper widgets for this example
+
+class Background extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.grey[200],
+      child: Placeholder(
+        color: Colors.green[200]!,
+      ),
+    );
+  }
+}
+
+class GrabbingWidget extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
+        boxShadow: [
+          BoxShadow(blurRadius: 25, color: Colors.black.withOpacity(0.2)),
+        ],
+      ),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Container(
+            margin: EdgeInsets.only(top: 20),
+            width: 100,
+            height: 7,
+            decoration: BoxDecoration(
+              color: Colors.grey,
+              borderRadius: BorderRadius.circular(5),
+            ),
+          ),
+          Container(
+            color: Colors.grey[200],
+            height: 2,
+            margin: EdgeInsets.all(15).copyWith(top: 0, bottom: 0),
+          )
+        ],
+      ),
+    );
+  }
 }
 
-class SnappingSheetExample extends StatelessWidget {
+class SnappingSheetExampleApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
@@ -28,89 +127,35 @@ class SnappingSheetExample extends StatelessWidget {
         ),
         primarySwatch: Colors.grey,
       ),
-      home: Menu(),
-      // home: PreviewReversePage(),
+      home: PageWrapper(),
     );
   }
 }
 
-class Menu extends StatelessWidget {
+class PageWrapper extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: Container(
-        child: LayoutBuilder(builder: (context, boxConstraints) {
-          return SingleChildScrollView(
-            child: Container(
-              constraints: BoxConstraints(
-                minHeight: boxConstraints.maxHeight,
-              ),
-              child: IntrinsicHeight(
-                child: Column(
-                  children: [
-                    MenuButton(
-                      page: PreviewPage(),
-                      text: "Preview Example",
-                      color: Colors.grey[300],
-                    ),
-                    MenuButton(
-                      page: PlaceholderExample(),
-                      text: "Placeholder Example",
-                      color: Colors.green[300],
-                    ),
-                    MenuButton(
-                      page: PreviewReversePage(),
-                      text: "Preview Reverse Example",
-                      color: Colors.grey[300],
-                    ),
-                    MenuButton(
-                      page: HorizontalExample(),
-                      text: "Horizontal Example",
-                      color: Colors.green[300],
-                    ),
-                  ],
-                ),
-              ),
-            ),
-          );
-        }),
-      ),
-    );
-  }
-}
-
-class MenuButton extends StatelessWidget {
-  final String text;
-  final Color? color;
-  final Widget page;
-
-  const MenuButton(
-      {Key? key, this.color, required this.text, required this.page})
-      : super(key: key);
-  @override
-  Widget build(BuildContext context) {
-    return Expanded(
-      flex: 1,
-      child: Container(
-        color: color,
-        constraints: BoxConstraints(minHeight: 200.0),
-        child: InkWell(
-          onTap: () {
-            Navigator.push(context, MaterialPageRoute(builder: (context) {
-              return page;
-            }));
-          },
-          child: Center(
-            child: Text(
-              this.text,
-              style: Theme.of(context)
-                  .textTheme
-                  .headline6
-                  ?.copyWith(fontWeight: FontWeight.bold),
-            ),
-          ),
+      appBar: AppBar(
+        title: Text(
+          "Example",
+          style: TextStyle(color: Colors.white),
         ),
+        actions: [
+          IconButton(
+            icon: Icon(Icons.menu),
+            onPressed: () => {
+              Navigator.push(
+                context,
+                MaterialPageRoute(builder: (context) {
+                  return Menu();
+                }),
+              ),
+            },
+          )
+        ],
       ),
+      body: SimpleSnappingSheet(),
     );
   }
 }
diff --git a/example/lib/pages/menu.dart b/example/lib/pages/menu.dart
@@ -0,0 +1,88 @@
+import 'package:example/pages/horizontal_example.dart';
+import 'package:example/pages/placeholder_example.dart';
+import 'package:example/pages/preview_page.dart';
+import 'package:example/pages/preview_reverse_page.dart';
+import 'package:example/shared/appbar.dart';
+import 'package:flutter/material.dart';
+
+class Menu extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: DarkAppBar(title: "Other Examples").build(context),
+      body: Container(
+        child: LayoutBuilder(builder: (context, boxConstraints) {
+          return SingleChildScrollView(
+            child: Container(
+              constraints: BoxConstraints(
+                minHeight: boxConstraints.maxHeight,
+              ),
+              child: IntrinsicHeight(
+                child: Column(
+                  children: [
+                    MenuButton(
+                      page: PreviewPage(),
+                      text: "Preview Example",
+                      color: Colors.grey[300],
+                    ),
+                    MenuButton(
+                      page: PlaceholderExample(),
+                      text: "Placeholder Example",
+                      color: Colors.green[300],
+                    ),
+                    MenuButton(
+                      page: PreviewReversePage(),
+                      text: "Preview Reverse Example",
+                      color: Colors.grey[300],
+                    ),
+                    MenuButton(
+                      page: HorizontalExample(),
+                      text: "Horizontal Example",
+                      color: Colors.green[300],
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          );
+        }),
+      ),
+    );
+  }
+}
+
+class MenuButton extends StatelessWidget {
+  final String text;
+  final Color? color;
+  final Widget page;
+
+  const MenuButton(
+      {Key? key, this.color, required this.text, required this.page})
+      : super(key: key);
+  @override
+  Widget build(BuildContext context) {
+    return Expanded(
+      flex: 1,
+      child: Container(
+        color: color,
+        constraints: BoxConstraints(minHeight: 200.0),
+        child: InkWell(
+          onTap: () {
+            Navigator.push(context, MaterialPageRoute(builder: (context) {
+              return page;
+            }));
+          },
+          child: Center(
+            child: Text(
+              this.text,
+              style: Theme.of(context)
+                  .textTheme
+                  .headline6
+                  ?.copyWith(fontWeight: FontWeight.bold),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,5 +1,5 @@
 name: snapping_sheet
-description: A package that provides a sheet widget that snaps to different vertical positions
+description: A package that provides a sheet widget that snaps to different vertical & horizontal positions
 version: 3.0.0+2
 homepage: https://github.com/AdamJonsson/snapping_sheet
 

diff --git a/test/snapping_sheet_widget_test.dart b/test/snapping_sheet_widget_test.dart
@@ -1,5 +1,3 @@
-import 'dart:math';
-
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:snapping_sheet/snapping_sheet.dart';