Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refine SheetExtent and related components #251

Merged
merged 22 commits into from
Sep 27, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
95c6880
Redefine SheetMetrics as a mixin
fujidaiti Sep 21, 2024
bb4cb62
Mix-in SheetExtent with SheetMetrics
fujidaiti Sep 21, 2024
e866848
Change SheetExtent to notify its "pixels" instead of "metrics"
fujidaiti Sep 21, 2024
80ed1be
Change SheetController to report client's "pixels" instead of "metrics"
fujidaiti Sep 21, 2024
3f34ea0
Rename sheet_extent to sheet_position
fujidaiti Sep 25, 2024
3ce9efc
Rename SheetExtent to SheetPosition
fujidaiti Sep 26, 2024
958a048
Rename Extent to SheetAnchor
fujidaiti Sep 26, 2024
df508fa
Rename ProportionalExtent to ProportionalSheetAnchor
fujidaiti Sep 26, 2024
638a9ac
Rename FixedExtent to FixedSheetAnchor
fujidaiti Sep 26, 2024
155739e
Replace "extent"s in comments with "position"s
fujidaiti Sep 26, 2024
06b3b12
Rename "minExtent"s to "maxExtent"s
fujidaiti Sep 26, 2024
952ab92
Rename "maxExtent"s to "maxPosition"s
fujidaiti Sep 27, 2024
9140c8f
Rename ExtentDrivenAnimation to SheetPositionDrivenAnimation
fujidaiti Sep 27, 2024
3722d6b
Rename sheet_extent_scope to sheet_position_scope
fujidaiti Sep 27, 2024
f7968a8
Rename navigation_sheet_extent_scope to navigation_sheet_position_scope
fujidaiti Sep 27, 2024
2c6ee74
Rename scrollable_sheet_extent to scrollable_sheet_position
fujidaiti Sep 27, 2024
684f35f
Rename scrollable_sheet_extent_scope
fujidaiti Sep 27, 2024
578bf90
Rename draggable_sheet_extent_scope
fujidaiti Sep 27, 2024
80814da
Rename draggable_sheet_extent
fujidaiti Sep 27, 2024
f59bb0f
Replace all "extent"s with "position"s
fujidaiti Sep 27, 2024
190bd3f
Rename PositionScopeBuilder
fujidaiti Sep 27, 2024
006a583
Update documentation
fujidaiti Sep 27, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
279 changes: 179 additions & 100 deletions README.md

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions example/lib/showcase/ai_playlist_generator.dart
Original file line number Diff line number Diff line change
Expand Up @@ -104,8 +104,8 @@ final _confirmRoute = GoRoute(
path: 'confirm',
pageBuilder: (context, state) {
return const ScrollableNavigationSheetPage(
initialExtent: Extent.proportional(0.7),
minExtent: Extent.proportional(0.7),
initialPosition: SheetAnchor.proportional(0.7),
minPosition: SheetAnchor.proportional(0.7),
physics: BouncingSheetPhysics(
parent: SnappingSheetPhysics(),
),
Expand Down
38 changes: 19 additions & 19 deletions example/lib/showcase/airbnb_mobile_app.dart
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ class _Home extends StatelessWidget {
return DefaultTabController(
length: _AppBar.tabs.length,
// Provides a SheetController to the descendant widgets
// to perform some sheet extent driven animations.
// to perform some sheet position driven animations.
// The sheet will look up and use this controller unless
// another one is manually specified in the constructor.
// The descendant widgets can also get this controller by
Expand All @@ -80,11 +80,11 @@ class _MapButton extends StatelessWidget {
final sheetController = DefaultSheetController.of(context);

void onPressed() {
final metrics = sheetController.value;
final metrics = sheetController.metrics;
if (metrics.hasDimensions) {
// Collapse the sheet to reveal the map behind.
sheetController.animateTo(
Extent.pixels(metrics.minPixels),
SheetAnchor.pixels(metrics.minPixels),
curve: Curves.fastOutSlowIn,
);
}
Expand All @@ -97,19 +97,19 @@ class _MapButton extends StatelessWidget {
icon: const Icon(Icons.map),
);

// It is easy to create sheet extent driven animations
// by using 'ExtentDrivenAnimation', a special kind of
// It is easy to create sheet position driven animations
// by using 'PositionDrivenAnimation', a special kind of
// 'Animation<double>' whose value changes from 0 to 1 as
// the sheet extent changes from 'startExtent' to 'endExtent'.
final animation = ExtentDrivenAnimation(
// the sheet position changes from 'startPosition' to 'endPosition'.
final animation = SheetPositionDrivenAnimation(
controller: DefaultSheetController.of(context),
// The initial value of the animation is required
// since the sheet extent is not available at the first build.
// since the sheet position is not available at the first build.
initialValue: 1,
// If null, the minimum extent will be used. (Default)
startExtent: null,
// If null, the maximum extent will be used. (Default)
endExtent: null,
// If null, the minimum position will be used. (Default)
startPosition: null,
// If null, the maximum position will be used. (Default)
endPosition: null,
).drive(CurveTween(curve: Curves.easeInExpo));

// Hide the button when the sheet is dragged down.
Expand Down Expand Up @@ -155,8 +155,8 @@ class _ContentSheet extends StatelessWidget {
final appbarHeight = MediaQuery.of(context).padding.top;
final handleHeight = const _ContentSheetHandle().preferredSize.height;
final sheetHeight = parentHeight - appbarHeight + handleHeight;
final minSheetExtent =
Extent.pixels(handleHeight + systemUiInsets.bottom);
final minSheetPosition =
SheetAnchor.pixels(handleHeight + systemUiInsets.bottom);

const sheetShape = RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
Expand All @@ -168,16 +168,16 @@ class _ContentSheet extends StatelessWidget {
parent: SnappingSheetPhysics(
snappingBehavior: SnapToNearest(
snapTo: [
minSheetExtent,
const Extent.proportional(1),
minSheetPosition,
const SheetAnchor.proportional(1),
],
),
),
);

return ScrollableSheet(
physics: sheetPhysics,
minExtent: minSheetExtent,
minPosition: minSheetPosition,
child: SizedBox(
height: sheetHeight,
child: const Card(
Expand Down Expand Up @@ -261,7 +261,7 @@ class _HouseList extends StatelessWidget {

// Hide the list when the sheet is dragged down.
return FadeTransition(
opacity: ExtentDrivenAnimation(
opacity: SheetPositionDrivenAnimation(
controller: DefaultSheetController.of(context),
initialValue: 1,
).drive(
Expand Down Expand Up @@ -453,7 +453,7 @@ class _BottomNavigationBar extends StatelessWidget {

// Hide the navigation bar when the sheet is dragged down.
return SlideTransition(
position: ExtentDrivenAnimation(
position: SheetPositionDrivenAnimation(
controller: DefaultSheetController.of(context),
initialValue: 1,
).drive(
Expand Down
8 changes: 4 additions & 4 deletions example/lib/showcase/safari/menu.dart
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ class MenuSheet extends StatelessWidget {

@override
Widget build(BuildContext context) {
const halfWayExtent = Extent.proportional(0.5);
const halfWayPosition = SheetAnchor.proportional(0.5);
return ScrollableSheet(
initialExtent: halfWayExtent,
minExtent: halfWayExtent,
initialPosition: halfWayPosition,
minPosition: halfWayPosition,
physics: const BouncingSheetPhysics(
parent: SnappingSheetPhysics(),
),
Expand Down Expand Up @@ -152,7 +152,7 @@ class _MenuListItem extends StatelessWidget {
trailing: Icon(icon, color: CupertinoColors.black),
onTap: () {
DefaultSheetController.maybeOf(context)
?.animateTo(const Extent.proportional(1));
?.animateTo(const SheetAnchor.proportional(1));
showEditBookmarkSheet(context);
},
);
Expand Down
12 changes: 6 additions & 6 deletions example/lib/tutorial/bottom_bar_visibility.dart
Original file line number Diff line number Diff line change
Expand Up @@ -133,9 +133,9 @@ class _ExampleSheet extends StatelessWidget {
),
);

const minSize = Extent.proportional(0.3);
const halfSize = Extent.proportional(0.5);
const fullSize = Extent.proportional(1);
const minSize = SheetAnchor.proportional(0.3);
const halfSize = SheetAnchor.proportional(0.5);
const fullSize = SheetAnchor.proportional(1);

const multiStopPhysics = BouncingSheetPhysics(
parent: SnappingSheetPhysics(
Expand All @@ -148,8 +148,8 @@ class _ExampleSheet extends StatelessWidget {
return SafeArea(
bottom: false,
child: DraggableSheet(
minExtent: minSize,
initialExtent: halfSize,
minPosition: minSize,
initialPosition: halfSize,
physics: multiStopPhysics,
child: SheetContentScaffold(
appBar: AppBar(),
Expand All @@ -166,7 +166,7 @@ class _ExampleSheet extends StatelessWidget {
getIsVisible: (metrics) {
// The bottom bar is visible when at least 50% of the sheet is visible.
return metrics.pixels >=
const Extent.proportional(0.5)
const SheetAnchor.proportional(0.5)
.resolve(metrics.contentSize);
},
child: bottomBar,
Expand Down
12 changes: 6 additions & 6 deletions example/lib/tutorial/bouncing_behaviors.dart
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ class _Home extends StatelessWidget {
behavior: FixedBouncingBehavior(
// Allows the sheet position to exceed the content bounds
// by ±10% of the content height.
Extent.proportional(0.1),
SheetAnchor.proportional(0.1),
),
),
),
Expand All @@ -39,7 +39,7 @@ class _Home extends StatelessWidget {
const _DraggableSheet(
behavior: FixedBouncingBehavior(
// Allows the sheet position to exceed the content bounds by ±50 pixels.
Extent.pixels(50),
SheetAnchor.pixels(50),
),
),
),
Expand All @@ -53,8 +53,8 @@ class _Home extends StatelessWidget {
// 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),
upward: SheetAnchor.pixels(20),
downward: SheetAnchor.proportional(0.3),
),
),
),
Expand All @@ -66,8 +66,8 @@ class _Home extends StatelessWidget {
const _DraggableSheet(
behavior: DirectionAwareBouncingBehavior(
// Allows the sheet to bounce only when dragging it downwards.
upward: Extent.pixels(0),
downward: Extent.proportional(0.1),
upward: SheetAnchor.pixels(0),
downward: SheetAnchor.proportional(0.1),
),
),
),
Expand Down
8 changes: 4 additions & 4 deletions example/lib/tutorial/cupertino_modal_sheet.dart
Original file line number Diff line number Diff line change
Expand Up @@ -70,10 +70,10 @@ class _HalfScreenSheet extends StatelessWidget {
@override
Widget build(BuildContext context) {
// `CupertinoStackedTransition` won't start the transition animation until
// the visible height of a modal sheet (the extent) exceeds 50% of the screen height.
// the visible height of a modal sheet (the position) exceeds 50% of the screen height.
return const DraggableSheet(
initialExtent: Extent.proportional(0.5),
minExtent: Extent.proportional(0.5),
initialPosition: SheetAnchor.proportional(0.5),
minPosition: SheetAnchor.proportional(0.5),
physics: BouncingSheetPhysics(
parent: SnappingSheetPhysics(),
),
Expand Down Expand Up @@ -120,7 +120,7 @@ class _SheetContent extends StatelessWidget {
// `DefaultSheetController.of` is a handy way to obtain a `SheetController`
// that is exposed by the parent `CupertinoModalSheetRoute`.
DefaultSheetController.maybeOf(context)
?.animateTo(const Extent.proportional(1));
?.animateTo(const SheetAnchor.proportional(1));
_showModalSheet(context, isFullScreen: true);
},
child: const Text('Stack'),
Expand Down
2 changes: 1 addition & 1 deletion example/lib/tutorial/declarative_navigation_sheet.dart
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ void main() {
}

// NavigationSheet requires a special NavigatorObserver in order to
// smoothly change its extent during a route transition.
// smoothly change its position during a route transition.
final transitionObserver = NavigationSheetTransitionObserver();

// To use declarative navigation, we utilize the 'go_router' package.
Expand Down
34 changes: 17 additions & 17 deletions example/lib/tutorial/extent_driven_animation.dart
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ import 'package:flutter/material.dart';
import 'package:smooth_sheets/smooth_sheets.dart';

void main() {
runApp(const _ExtentDrivenAnimationExample());
runApp(const _PositionDrivenAnimationExample());
}

class _ExtentDrivenAnimationExample extends StatelessWidget {
const _ExtentDrivenAnimationExample();
class _PositionDrivenAnimationExample extends StatelessWidget {
const _PositionDrivenAnimationExample();

@override
Widget build(BuildContext context) {
Expand All @@ -20,7 +20,7 @@ class _ExampleScaffold extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Provides a SheetController to the descendant widgets
// to perform some sheet extent driven animations.
// to perform some sheet position driven animations.
// The sheet will look up and use this controller unless
// another one is manually specified in the constructor.
// The descendant widgets can also get this controller by
Expand Down Expand Up @@ -48,18 +48,18 @@ class _ExampleSheet extends StatelessWidget {
@override
Widget build(BuildContext context) {
final bottomPadding = MediaQuery.of(context).padding.bottom;
final minExtent = Extent.pixels(56 + bottomPadding);
final minPosition = SheetAnchor.pixels(56 + bottomPadding);

final physics = BouncingSheetPhysics(
parent: SnappingSheetPhysics(
snappingBehavior: SnapToNearest(
snapTo: [minExtent, const Extent.proportional(1)],
snapTo: [minPosition, const SheetAnchor.proportional(1)],
),
),
);

return DraggableSheet(
minExtent: minExtent,
minPosition: minPosition,
physics: physics,
child: Card(
margin: EdgeInsets.zero,
Expand All @@ -84,19 +84,19 @@ class _BottomAppBar extends StatelessWidget {
// Lookup the nearest controller.
final controller = DefaultSheetController.of(context);

// It is easy to create sheet extent driven animations
// by using 'ExtentDrivenAnimation', a special kind of
// It is easy to create sheet position driven animations
// by using 'PositionDrivenAnimation', a special kind of
// 'Animation<double>' whose value changes from 0 to 1 as
// the sheet extent changes from 'startExtent' to 'endExtent'.
final animation = ExtentDrivenAnimation(
// the sheet position changes from 'startPosition' to 'endPosition'.
final animation = SheetPositionDrivenAnimation(
controller: controller,
// The initial value of the animation is required
// since the sheet extent is not available at the first build.
// since the sheet position is not available at the first build.
initialValue: 1,
// If null, the minimum extent will be used. (Default)
startExtent: null,
// If null, the maximum extent will be used. (Default)
endExtent: null,
// If null, the minimum position will be used. (Default)
startPosition: null,
// If null, the maximum position will be used. (Default)
endPosition: null,
);

final bottomAppBar = BottomAppBar(
Expand Down Expand Up @@ -134,7 +134,7 @@ class _RotatedFlutterLogo extends StatelessWidget {
@override
Widget build(BuildContext context) {
final logo = RotationTransition(
turns: ExtentDrivenAnimation(
turns: SheetPositionDrivenAnimation(
controller: DefaultSheetController.of(context),
initialValue: 1,
),
Expand Down
2 changes: 1 addition & 1 deletion example/lib/tutorial/imperative_modal_sheet.dart
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ class _ExampleSheet extends StatelessWidget {
}
},
child: DraggableSheet(
minExtent: const Extent.proportional(0.5),
minPosition: const SheetAnchor.proportional(0.5),
child: Card(
color: Theme.of(context).colorScheme.secondaryContainer,
margin: EdgeInsets.zero,
Expand Down
2 changes: 1 addition & 1 deletion example/lib/tutorial/imperative_navigation_sheet.dart
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ class _ImperativeNavigationSheetExample extends StatelessWidget {
}

// NavigationSheet requires a special NavigatorObserver in order to
// smoothly change its extent during a route transition.
// smoothly change its position during a route transition.
final _transitionObserver = NavigationSheetTransitionObserver();

class _ExampleSheet extends StatelessWidget {
Expand Down
8 changes: 4 additions & 4 deletions example/lib/tutorial/scrollable_sheet.dart
Original file line number Diff line number Diff line change
Expand Up @@ -45,14 +45,14 @@ class _MySheet extends StatelessWidget {
child: buildSheetBackground(context, content),
// Optional: Comment out the following lines to add multiple stop positions.
//
// minExtent: const Extent.proportional(0.2),
// minPosition: const SheetAnchor.proportional(0.2),
// physics: BouncingSheetPhysics(
// parent: SnappingSheetPhysics(
// snappingBehavior: SnapToNearest(
// snapTo: [
// const Extent.proportional(0.2),
// const Extent.proportional(0.5),
// const Extent.proportional(1),
// const SheetAnchor.proportional(0.2),
// const SheetAnchor.proportional(0.5),
// const SheetAnchor.proportional(1),
// ],
// ),
// ),
Expand Down
11 changes: 6 additions & 5 deletions example/lib/tutorial/sheet_content_scaffold.dart
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@ class _ExampleSheet extends StatelessWidget {
getIsVisible: (metrics) {
return metrics.viewportInsets.bottom == 0 &&
metrics.pixels >
const Extent.proportional(0.5).resolve(metrics.contentSize);
const SheetAnchor.proportional(0.5)
.resolve(metrics.contentSize);
},
child: buildBottomBar(),
),
Expand All @@ -54,17 +55,17 @@ class _ExampleSheet extends StatelessWidget {
parent: SnappingSheetPhysics(
snappingBehavior: SnapToNearest(
snapTo: [
Extent.proportional(0.2),
Extent.proportional(0.5),
Extent.proportional(1),
SheetAnchor.proportional(0.2),
SheetAnchor.proportional(0.5),
SheetAnchor.proportional(1),
],
),
),
);

return DraggableSheet(
physics: physics,
minExtent: const Extent.pixels(0),
minPosition: const SheetAnchor.pixels(0),
child: Card(
clipBehavior: Clip.antiAlias,
margin: EdgeInsets.zero,
Expand Down
Loading
Loading