Skip to content

Commit

Permalink
Add example of BouncingBehavior and its subclasses (#180)
Browse files Browse the repository at this point in the history
Closes #176.
  • Loading branch information
fujidaiti authored Jun 22, 2024
1 parent 363ad3d commit 814a069
Show file tree
Hide file tree
Showing 3 changed files with 128 additions and 3 deletions.
123 changes: 123 additions & 0 deletions cookbook/lib/tutorial/bouncing_behaviors.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
import 'package:flutter/material.dart';
import 'package:smooth_sheets/smooth_sheets.dart';

void main() {
runApp(const MaterialApp(home: _Home()));
}

class _Home extends StatelessWidget {
const _Home();

@override
Widget build(BuildContext context) {
void showModalSheet(Widget sheet) {
Navigator.push(context, ModalSheetRoute(builder: (_) => sheet));
}

return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ListTile(
title: const Text('FixedBouncingBehavior'),
subtitle: const Text('with ScrollableSheet'),
onTap: () => showModalSheet(
const _ScrollableSheet(
behavior: FixedBouncingBehavior(
// Allows the sheet position to exceed the content bounds
// by ±10% of the content height.
Extent.proportional(0.1),
),
),
),
),
ListTile(
title: const Text('FixedBouncingBehavior'),
subtitle: const Text('with DraggableSheet'),
onTap: () => showModalSheet(
const _DraggableSheet(
behavior: FixedBouncingBehavior(
// Allows the sheet position to exceed the content bounds by ±50 pixels.
Extent.pixels(50),
),
),
),
),
ListTile(
title: const Text('DirectionAwareBouncingBehavior'),
subtitle: const Text('with ScrollableSheet'),
onTap: () => showModalSheet(
const _ScrollableSheet(
behavior: DirectionAwareBouncingBehavior(
// Allows the sheet position to exceed the content bounds by 10 pixels
// when dragging the sheet upwards, and by ±30% of the content height
// when dragging it downwards.
upward: Extent.pixels(20),
downward: Extent.proportional(0.3),
),
),
),
),
ListTile(
title: const Text('DirectionAwareBouncingBehavior'),
subtitle: const Text('with DraggableSheet'),
onTap: () => showModalSheet(
const _DraggableSheet(
behavior: DirectionAwareBouncingBehavior(
// Allows the sheet to bounce only when dragging it downwards.
upward: Extent.pixels(0),
downward: Extent.proportional(0.1),
),
),
),
),
],
),
),
);
}
}

class _ScrollableSheet extends StatelessWidget {
const _ScrollableSheet({required this.behavior});

final BouncingBehavior behavior;

@override
Widget build(BuildContext context) {
return ScrollableSheet(
physics: BouncingSheetPhysics(behavior: behavior),
child: Material(
color: Colors.white,
child: SizedBox(
height: 500,
child: ListView(
children: List.generate(
30,
(index) => ListTile(title: Text('Item $index')),
),
),
),
),
);
}
}

class _DraggableSheet extends StatelessWidget {
const _DraggableSheet({required this.behavior});

final BouncingBehavior behavior;

@override
Widget build(BuildContext context) {
return DraggableSheet(
physics: BouncingSheetPhysics(behavior: behavior),
child: Container(
height: 500,
width: double.infinity,
color: Colors.white,
),
);
}
}
1 change: 1 addition & 0 deletions docs/migration-guide-0.8.x.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,4 @@ See also:

- [FixedBouncingBehavior](https://pub.dev/documentation/smooth_sheets/latest/smooth_sheets/FixedBouncingBehavior-class.html), which allows the sheet position to exceeds the content bounds by a fixed amount.
- [DirectionAwareBouncingBehavior](https://pub.dev/documentation/smooth_sheets/latest/smooth_sheets/DirectionAwareBouncingBehavior-class.html), which is similar to `FixedBouncingBehavior`, but different bounceable ranges can be set for each direction.
- [tutorial/bouncing_behaviors.dart](https://github.com/fujidaiti/smooth_sheets/blob/main/cookbook/lib/tutorial/bouncing_behaviors.dart), an interactive example of `BouncingBehavior` classes.
7 changes: 4 additions & 3 deletions package/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -220,9 +220,9 @@ See also:

A physics determines how the sheet will behave when over-dragged or under-dragged, or when the user stops dragging. There are 3 predefined physics:

- ClampingSheetPhysics: Prevents the sheet from reaching beyond the draggable bounds
- BouncingSheetPhysics: Allows the sheet to go beyond the draggable bounds, but then bounce the sheet back to the edge of those bounds
- SnappingSheetPhysics: Automatically snaps the sheet to a certain extent when the user stops dragging
- ClampingSheetPhysics: Prevents the sheet from reaching beyond the content bounds.
- BouncingSheetPhysics: Allows the sheet to go beyond the content bounds, but then bounce the sheet back to the edge of those bounds. Use [BouncingBehavior](https://pub.dev/documentation/smooth_sheets/latest/smooth_sheets/BouncingBehavior-class.html) and its subclasses to tweak the bouncing behavior.
- SnappingSheetPhysics: Automatically snaps the sheet to a certain extent when the user stops dragging.

These physics can be combined to create more complex behavior (e.g. bouncing behavior + snapping behavior).

Expand All @@ -231,6 +231,7 @@ These physics can be combined to create more complex behavior (e.g. bouncing beh
See also:

- [sheet_physics.dart](https://github.com/fujidaiti/smooth_sheets/blob/main/cookbook/lib/tutorial/sheet_physics.dart) for basic usage.
- [bouncing_behaviors.dart](https://github.com/fujidaiti/smooth_sheets/blob/main/cookbook/lib/tutorial/bouncing_behaviors.dart), which shows how to tweak the bouncing behavior of BouncingSheetPhysics.

<br/>

Expand Down

0 comments on commit 814a069

Please sign in to comment.