-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix: Cupertino style modal transition not working with NavigationSheet (
#182) Fixes #168. The `SheetExtentScope` has been modified to no longer rely on an inherited sheet controller as a fallback. Instead, the sheet controller is now explicitly provided in the constructor of `SheetExtentScope` when necessary. Additional changes: - Added a new example demonstrating an iOS-style modal NavigationSheet with go_router. - Added a regression test for the issue. - Added more tests to cover the functionality around inheriting a sheet controller. - Bumped the version number to 0.8.1.
- Loading branch information
Showing
13 changed files
with
253 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
92 changes: 92 additions & 0 deletions
92
cookbook/lib/tutorial/ios_style_declarative_modal_navigation_sheet.dart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,92 @@ | ||
import 'package:flutter/material.dart'; | ||
import 'package:go_router/go_router.dart'; | ||
import 'package:smooth_sheets/smooth_sheets.dart'; | ||
|
||
/// Example code of iOS style modal `NavigationSheet` with go_router. | ||
void main() { | ||
runApp(const _App()); | ||
} | ||
|
||
final transitionObserver = NavigationSheetTransitionObserver(); | ||
|
||
final router = GoRouter( | ||
initialLocation: '/', | ||
routes: [ | ||
GoRoute( | ||
path: '/', | ||
builder: (context, state) { | ||
return const _Home(); | ||
}, | ||
routes: [ | ||
ShellRoute( | ||
observers: [transitionObserver], | ||
pageBuilder: (context, state, child) { | ||
return CupertinoModalSheetPage( | ||
key: state.pageKey, | ||
child: _Modal(nestedNavigator: child), | ||
); | ||
}, | ||
routes: [ | ||
GoRoute( | ||
path: 'modal', | ||
pageBuilder: (context, state) { | ||
return DraggableNavigationSheetPage( | ||
key: state.pageKey, | ||
child: Container(color: Colors.white), | ||
); | ||
}, | ||
), | ||
], | ||
) | ||
]), | ||
], | ||
); | ||
|
||
class _App extends StatelessWidget { | ||
const _App(); | ||
|
||
@override | ||
Widget build(BuildContext context) { | ||
return MaterialApp.router(routerConfig: router); | ||
} | ||
} | ||
|
||
class _Home extends StatelessWidget { | ||
const _Home(); | ||
|
||
@override | ||
Widget build(BuildContext context) { | ||
return CupertinoStackedTransition( | ||
cornerRadius: Tween(begin: 0, end: 20), | ||
child: Scaffold( | ||
body: Center( | ||
child: TextButton( | ||
onPressed: () => context.go('/modal'), | ||
child: const Text('Show Sheet'), | ||
), | ||
), | ||
), | ||
); | ||
} | ||
} | ||
|
||
class _Modal extends StatelessWidget { | ||
const _Modal({ | ||
required this.nestedNavigator, | ||
}); | ||
|
||
final Widget nestedNavigator; | ||
|
||
@override | ||
Widget build(BuildContext context) { | ||
return NavigationSheet( | ||
transitionObserver: transitionObserver, | ||
child: Material( | ||
color: Colors.white, | ||
borderRadius: BorderRadius.circular(20), | ||
clipBehavior: Clip.antiAlias, | ||
child: nestedNavigator, | ||
), | ||
); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
import 'package:flutter/material.dart'; | ||
import 'package:flutter_test/flutter_test.dart'; | ||
import 'package:smooth_sheets/smooth_sheets.dart'; | ||
import 'package:smooth_sheets/src/foundation/sheet_controller.dart'; | ||
|
||
class _TestWidget extends StatelessWidget { | ||
const _TestWidget({ | ||
this.contentKey, | ||
this.contentHeight = 500, | ||
}); | ||
|
||
final Key? contentKey; | ||
final double contentHeight; | ||
|
||
@override | ||
Widget build(BuildContext context) { | ||
final content = Container( | ||
key: contentKey, | ||
color: Colors.white, | ||
height: contentHeight, | ||
width: double.infinity, | ||
); | ||
|
||
return Directionality( | ||
textDirection: TextDirection.ltr, | ||
child: MediaQuery( | ||
data: const MediaQueryData(), | ||
child: DraggableSheet( | ||
child: content, | ||
), | ||
), | ||
); | ||
} | ||
} | ||
|
||
void main() { | ||
testWidgets('Inherited controller should be attached', (tester) async { | ||
final controller = SheetController(); | ||
await tester.pumpWidget( | ||
SheetControllerScope( | ||
controller: controller, | ||
child: const _TestWidget(), | ||
), | ||
); | ||
|
||
expect(controller.hasClient, isTrue, | ||
reason: 'The controller should have a client.'); | ||
}); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
import 'package:flutter/material.dart'; | ||
import 'package:flutter_test/flutter_test.dart'; | ||
import 'package:smooth_sheets/smooth_sheets.dart'; | ||
import 'package:smooth_sheets/src/foundation/sheet_controller.dart'; | ||
|
||
class _TestWidget extends StatelessWidget { | ||
const _TestWidget({ | ||
this.contentKey, | ||
this.contentHeight, | ||
this.scrollPhysics = const ClampingScrollPhysics(), | ||
}); | ||
|
||
final Key? contentKey; | ||
final double? contentHeight; | ||
final ScrollPhysics scrollPhysics; | ||
|
||
@override | ||
Widget build(BuildContext context) { | ||
Widget content = Material( | ||
color: Colors.white, | ||
child: ListView( | ||
key: contentKey, | ||
physics: scrollPhysics, | ||
children: List.generate( | ||
30, | ||
(index) => ListTile( | ||
title: Text('Item $index'), | ||
), | ||
), | ||
), | ||
); | ||
|
||
if (contentHeight case final height?) { | ||
content = SizedBox(height: height, child: content); | ||
} | ||
|
||
return Directionality( | ||
textDirection: TextDirection.ltr, | ||
child: MediaQuery( | ||
data: const MediaQueryData(), | ||
child: ScrollableSheet( | ||
child: content, | ||
), | ||
), | ||
); | ||
} | ||
} | ||
|
||
void main() { | ||
testWidgets('Inherited controller should be attached', (tester) async { | ||
final controller = SheetController(); | ||
await tester.pumpWidget( | ||
SheetControllerScope( | ||
controller: controller, | ||
child: const _TestWidget(), | ||
), | ||
); | ||
|
||
expect(controller.hasClient, isTrue, | ||
reason: 'The controller should have a client.'); | ||
}); | ||
} |