MrBlake/MrbWebLibre
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

use slivers with sticky header for tab sheet

Browse Source
This commit is contained in:
Fabian Freund
2024-07-02 11:03:12 +02:00
parent 42c7d0ebdc
commit 2c9b68beef
2 changed files with 150 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/lib/features/search_browser/presentation/screens/browser.dart
+6 -2
View File
@@ -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();
},
app/lib/features/search_browser/presentation/widgets/sheets/view_tabs_sheet.dart
+144 -44
View File
@@ -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(),
),
);
},
),