Improved circle page transition

This commit is contained in:
Juan Gilsanz Polo
2024-02-29 21:33:14 +01:00
parent b29cf64252
commit 2574ffc2f0
2 changed files with 39 additions and 30 deletions

View File

@@ -73,7 +73,7 @@ class _List extends ConsumerWidget {
RenderBox box = _searchButtonKey.currentContext!.findRenderObject() as RenderBox; RenderBox box = _searchButtonKey.currentContext!.findRenderObject() as RenderBox;
Offset position = box.localToGlobal(Offset.zero); Offset position = box.localToGlobal(Offset.zero);
Navigator.of(context, rootNavigator: true).push( Navigator.of(context, rootNavigator: true).push(
circlePageBuilder( CirclePageRoute(
page: const SearchBookmarksModal(fullscreen: true), page: const SearchBookmarksModal(fullscreen: true),
beginPosition: Offset(position.dx + 20, position.dy + 20), beginPosition: Offset(position.dx + 20, position.dy + 20),
), ),

View File

@@ -1,18 +1,28 @@
import 'package:flutter/material.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/widgets.dart';
Route circlePageBuilder({ class CirclePageRoute extends PageRouteBuilder {
required Widget page, final Widget page;
required Offset beginPosition, final Offset beginPosition;
bool? fullScreenDialog,
Duration? transitionDuration, CirclePageRoute({
}) { required this.page,
return PageRouteBuilder( required this.beginPosition,
pageBuilder: (context, animation, secondaryAnimation) => page, }) : super(
transitionDuration: transitionDuration ?? const Duration(milliseconds: 250), pageBuilder: (
reverseTransitionDuration: transitionDuration ?? const Duration(milliseconds: 250), BuildContext context,
fullscreenDialog: fullScreenDialog ?? false, Animation<double> animation,
transitionsBuilder: (context, animation, secondaryAnimation, child) { Animation<double> secondaryAnimation,
) =>
page,
);
@override
Widget buildTransitions(
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) {
const double beganRadius = 0.0; const double beganRadius = 0.0;
final size = MediaQuery.of(context).size; final size = MediaQuery.of(context).size;
final double endRadius = size.height > size.width ? size.height * 1.2 : size.width * 1.2; final double endRadius = size.height > size.width ? size.height * 1.2 : size.width * 1.2;
@@ -28,8 +38,7 @@ Route circlePageBuilder({
), ),
child: child, child: child,
); );
}, }
);
} }
class _CircleTransitionClipper extends CustomClipper<Path> { class _CircleTransitionClipper extends CustomClipper<Path> {