diff --git a/README.md b/README.md index 526c049..c2e9ab8 100644 --- 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

diff --git a/example/lib/main.dart b/example/lib/main.dart index fec0903..6e6f0a3 100644 --- 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 new file mode 100644 index 0000000..48d1efb --- /dev/null +++ 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 index 4b7049d..51577a6 100644 --- 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 index b7a1acd..980b651 100644 --- 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';