Search modal animation

lib/screens/bookmarks/ui/bookmarks.dart

@@ -1,5 +1,3 @@
-import 'dart:io';
-
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_slidable/flutter_slidable.dart';
@@ -9,6 +7,7 @@ import 'package:linkdy/screens/bookmarks/ui/bookmark_item.dart';
 import 'package:linkdy/screens/bookmarks/ui/bookmark_form_modal.dart';
 import 'package:linkdy/screens/bookmarks/ui/delete_bookmark_modal.dart';
 import 'package:linkdy/screens/bookmarks/ui/search_bookmarks.dart';
+import 'package:linkdy/widgets/circle_page_transition.dart';
 import 'package:linkdy/widgets/error_screen.dart';
 import 'package:linkdy/widgets/no_data_screen.dart';
 
@@ -16,6 +15,8 @@ import 'package:linkdy/constants/enums.dart';
 import 'package:linkdy/constants/global_keys.dart';
 import 'package:linkdy/i18n/strings.g.dart';
 
+final GlobalKey _searchButtonKey = GlobalKey();
+
 class BookmarksScreen extends ConsumerWidget {
   const BookmarksScreen({super.key});
 
@@ -26,18 +27,14 @@ class BookmarksScreen extends ConsumerWidget {
     final width = MediaQuery.of(context).size.width;
 
     void openSearchModal() {
-      showGeneralDialog(
+      if (_searchButtonKey.currentContext == null) return;
-        context: context,
+      RenderBox box = _searchButtonKey.currentContext!.findRenderObject() as RenderBox;
-        barrierColor: !(width > 700 || !(Platform.isAndroid || Platform.isIOS)) ? Colors.transparent : Colors.black54,
+      Offset position = box.localToGlobal(Offset.zero);
-        transitionBuilder: (context, anim1, anim2, child) {
+      Navigator.of(context).push(
-          return SlideTransition(
+        circlePageBuilder(
-            position: Tween(begin: const Offset(0, 1), end: const Offset(0, 0)).animate(
+          page: const SearchBookmarksModal(fullscreen: true),
-              CurvedAnimation(parent: anim1, curve: Curves.easeInOutCubicEmphasized),
+          beginPosition: Offset(position.dx + 20, position.dy + 20),
-            ),
+        ),
-            child: child,
-          );
-        },
-        pageBuilder: (context, animation, secondaryAnimation) => SearchBookmarksModal(fullscreen: width <= 700),
       );
     }
 
@@ -66,6 +63,7 @@ class BookmarksScreen extends ConsumerWidget {
                 title: Text(t.bookmarks.bookmarks),
                 actions: [
                   IconButton(
+                    key: _searchButtonKey,
                     onPressed: openSearchModal,
                     icon: const Icon(Icons.search_rounded),
                     tooltip: t.bookmarks.search.searchBookmarks,

lib/screens/bookmarks/ui/search_bookmarks.dart

@@ -44,7 +44,9 @@ class SearchBookmarksModal extends ConsumerWidget {
       key: ScaffoldMessengerKeys.search,
       child: Dialog.fullscreen(
         child: Scaffold(
+          backgroundColor: Theme.of(context).colorScheme.primaryContainer.withOpacity(0.2),
           appBar: AppBar(
+            backgroundColor: Theme.of(context).colorScheme.primaryContainer.withOpacity(0),
             toolbarHeight: 68,
             leading: Padding(
               padding: const EdgeInsets.only(bottom: 8),

lib/widgets/circle_page_transition.dart

@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+Route circlePageBuilder({
+  required Widget page,
+  required 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 double endRadius = MediaQuery.of(context).size.height * 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> {
+  final Offset center;
+  final double radius;
+
+  const _CircleTransitionClipper({
+    required this.center,
+    required this.radius,
+  });
+
+  @override
+  Path getClip(Size size) {
+    return Path()
+      ..addOval(
+        Rect.fromCircle(
+          center: center,
+          radius: radius,
+        ),
+      );
+  }
+
+  @override
+  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => true;
+}