From 2c9b68beef8d5393bfcf5e66945dcb08a4ef8e7a Mon Sep 17 00:00:00 2001 From: Fabian Freund Date: Tue, 2 Jul 2024 11:03:12 +0200 Subject: [PATCH] use slivers with sticky header for tab sheet --- .../presentation/screens/browser.dart | 8 +- .../widgets/sheets/view_tabs_sheet.dart | 188 ++++++++++++++---- 2 files changed, 150 insertions(+), 46 deletions(-) diff --git a/app/lib/features/search_browser/presentation/screens/browser.dart b/app/lib/features/search_browser/presentation/screens/browser.dart index 0f86dd71..41a5af2b 100644 --- a/app/lib/features/search_browser/presentation/screens/browser.dart +++ b/app/lib/features/search_browser/presentation/screens/browser.dart @@ -396,9 +396,13 @@ class KagiScreen extends HookConsumerWidget { minChildSize: 0.1, maxChildSize: _realtiveSafeArea(context), builder: (context, scrollController) { - return SingleChildScrollView( - controller: scrollController, + return ClipRRect( + borderRadius: const BorderRadius.only( + topLeft: Radius.circular(28), + topRight: Radius.circular(28), + ), child: ViewTabsSheet( + sheetScrollController: scrollController, onClose: () { ref.read(bottomSheetProvider.notifier).dismiss(); }, diff --git a/app/lib/features/search_browser/presentation/widgets/sheets/view_tabs_sheet.dart b/app/lib/features/search_browser/presentation/widgets/sheets/view_tabs_sheet.dart index 57bdf500..7d569bd0 100644 --- a/app/lib/features/search_browser/presentation/widgets/sheets/view_tabs_sheet.dart +++ b/app/lib/features/search_browser/presentation/widgets/sheets/view_tabs_sheet.dart @@ -1,43 +1,105 @@ +import 'dart:async'; + import 'package:bang_navigator/features/web_view/domain/repositories/web_view.dart'; import 'package:bang_navigator/features/web_view/presentation/controllers/switch_new_tab.dart'; import 'package:bang_navigator/features/web_view/presentation/widgets/web_view_tab.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; -class ViewTabsSheet extends HookConsumerWidget { +class _SliverHeaderDelagate extends SliverPersistentHeaderDelegate { final VoidCallback onClose; - const ViewTabsSheet({required this.onClose, super.key}); + _SliverHeaderDelagate({required this.onClose}); + + @override + Widget build( + BuildContext context, double shrinkOffset, bool overlapsContent) { + return Material( + child: Consumer( + builder: (context, ref, child) { + //Fix layout issue https://github.com/flutter/flutter/issues/78748#issuecomment-1194680555 + return Align( + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + TextButton.icon( + onPressed: () async { + await ref + .read(switchNewTabControllerProvider.notifier) + .add(Uri.https('kagi.com')); + + onClose(); + }, + icon: const Icon(Icons.add), + label: const Text('New Tab'), + ), + TextButton.icon( + onPressed: () { + ref.read(webViewRepositoryProvider.notifier).closeAllTabs(); + onClose(); + }, + icon: const Icon(Icons.delete), + label: const Text('Close All'), + ), + ], + ), + ); + }, + ), + ); + } + + @override + double get minExtent => 48; + + @override + double get maxExtent => 48; + + @override + bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) => + false; +} + +class ViewTabsSheet extends HookConsumerWidget { + final ScrollController sheetScrollController; + final VoidCallback onClose; + + const ViewTabsSheet({ + required this.onClose, + required this.sheetScrollController, + super.key, + }); + + double _calculateItemHeight({ + required double screenWidth, + required double childAspectRatio, + required double horizontalPadding, + required double mainAxisSpacing, + required double crossAxisSpacing, + required int crossAxisCount, + }) { + final totalHorizontalPadding = horizontalPadding * 2; + final totalCrossAxisSpacing = crossAxisSpacing * (crossAxisCount - 1); + final availableWidth = + screenWidth - totalHorizontalPadding - totalCrossAxisSpacing; + final itemWidth = availableWidth / crossAxisCount; + final itemHeight = itemWidth / childAspectRatio; + final totalItemHeight = itemHeight + mainAxisSpacing; + + return totalItemHeight; + } @override Widget build(BuildContext context, WidgetRef ref) { - return Column( - mainAxisSize: MainAxisSize.min, - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - TextButton.icon( - onPressed: () async { - await ref - .read(switchNewTabControllerProvider.notifier) - .add(Uri.https('kagi.com')); - - onClose(); - }, - icon: const Icon(Icons.add), - label: const Text('New Tab'), - ), - TextButton.icon( - onPressed: () { - ref.read(webViewRepositoryProvider.notifier).closeAllTabs(); - }, - icon: const Icon(Icons.delete), - label: const Text('Close All'), - ), - ], + return CustomScrollView( + controller: sheetScrollController, + slivers: [ + SliverPersistentHeader( + pinned: true, + delegate: _SliverHeaderDelagate(onClose: onClose), ), - Consumer( + HookConsumer( builder: (context, ref, child) { final tabs = ref.watch( webViewRepositoryProvider.select((tabs) => tabs.values.toList()), @@ -48,23 +110,61 @@ class ViewTabsSheet extends HookConsumerWidget { ), ); - return GridView.count( - shrinkWrap: true, - physics: const NeverScrollableScrollPhysics(), - childAspectRatio: 0.75, + final itemHeight = useMemoized( + () => _calculateItemHeight( + screenWidth: MediaQuery.of(context).size.width, + childAspectRatio: 0.75, + horizontalPadding: 4.0, + mainAxisSpacing: 8.0, + crossAxisSpacing: 8.0, + crossAxisCount: 2, + ), + [MediaQuery.of(context).size.width], + ); + + useEffect( + () { + final index = + tabs.indexWhere((webView) => webView.key == activeTab); + + if (index > -1) { + final reversedIndex = tabs.length - 1 - index; + final offset = (reversedIndex ~/ 2) * itemHeight; + + if (offset != sheetScrollController.offset) { + unawaited( + sheetScrollController.animateTo( + offset, + duration: const Duration(milliseconds: 200), + curve: Curves.easeInOut, + ), + ); + } + } + + return null; + }, + [], + ); + + return SliverPadding( padding: const EdgeInsets.symmetric(horizontal: 4.0), - mainAxisSpacing: 8.0, - crossAxisSpacing: 8.0, - crossAxisCount: 2, - children: tabs.reversed - .map( - (webView) => WebViewTab( - webView: webView, - isActive: webView.key == activeTab, - onClose: onClose, - ), - ) - .toList(), + sliver: SliverGrid.count( + //Sync values for itemHeight calculation _calculateItemHeight + childAspectRatio: 0.75, + mainAxisSpacing: 8.0, + crossAxisSpacing: 8.0, + crossAxisCount: 2, + children: tabs.reversed + .map( + (webView) => WebViewTab( + webView: webView, + isActive: webView.key == activeTab, + onClose: onClose, + ), + ) + .toList(), + ), ); }, ),