Improved circle page transition
This commit is contained in:
@@ -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),
|
||||||
),
|
),
|
||||||
|
|||||||
@@ -1,35 +1,44 @@
|
|||||||
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,
|
|
||||||
}) {
|
|
||||||
return PageRouteBuilder(
|
|
||||||
pageBuilder: (context, animation, secondaryAnimation) => page,
|
|
||||||
transitionDuration: transitionDuration ?? const Duration(milliseconds: 250),
|
|
||||||
reverseTransitionDuration: transitionDuration ?? const Duration(milliseconds: 250),
|
|
||||||
fullscreenDialog: fullScreenDialog ?? false,
|
|
||||||
transitionsBuilder: (context, animation, secondaryAnimation, child) {
|
|
||||||
const double beganRadius = 0.0;
|
|
||||||
final size = MediaQuery.of(context).size;
|
|
||||||
final double endRadius = size.height > size.width ? size.height * 1.2 : size.width * 1.2;
|
|
||||||
|
|
||||||
final radiusTweenAnimation = animation.drive(
|
CirclePageRoute({
|
||||||
Tween(begin: beganRadius, end: endRadius),
|
required this.page,
|
||||||
);
|
required this.beginPosition,
|
||||||
|
}) : super(
|
||||||
|
pageBuilder: (
|
||||||
|
BuildContext context,
|
||||||
|
Animation<double> animation,
|
||||||
|
Animation<double> secondaryAnimation,
|
||||||
|
) =>
|
||||||
|
page,
|
||||||
|
);
|
||||||
|
|
||||||
return ClipPath(
|
@override
|
||||||
clipper: _CircleTransitionClipper(
|
Widget buildTransitions(
|
||||||
center: beginPosition,
|
BuildContext context,
|
||||||
radius: radiusTweenAnimation.value,
|
Animation<double> animation,
|
||||||
),
|
Animation<double> secondaryAnimation,
|
||||||
child: child,
|
Widget child,
|
||||||
);
|
) {
|
||||||
},
|
const double beganRadius = 0.0;
|
||||||
);
|
final size = MediaQuery.of(context).size;
|
||||||
|
final double endRadius = size.height > size.width ? size.height * 1.2 : size.width * 1.2;
|
||||||
|
|
||||||
|
final radiusTweenAnimation = animation.drive(
|
||||||
|
Tween(begin: beganRadius, end: endRadius),
|
||||||
|
);
|
||||||
|
|
||||||
|
return ClipPath(
|
||||||
|
clipper: _CircleTransitionClipper(
|
||||||
|
center: beginPosition,
|
||||||
|
radius: radiusTweenAnimation.value,
|
||||||
|
),
|
||||||
|
child: child,
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class _CircleTransitionClipper extends CustomClipper<Path> {
|
class _CircleTransitionClipper extends CustomClipper<Path> {
|
||||||
|
|||||||
Reference in New Issue
Block a user