use bottom sheets instead of dialogs

This commit is contained in:
Fabian Freund
2026-01-29 18:24:35 +01:00
parent 1e9ecb40ba
commit c9fdb6b768
10 changed files with 295 additions and 166 deletions
+1 -1
View File
@@ -291,7 +291,7 @@ class SelectProfileRoute extends GoRouteData with $SelectProfileRoute {
@override @override
Page<void> buildPage(BuildContext context, GoRouterState state) { Page<void> buildPage(BuildContext context, GoRouterState state) {
return DialogPage(builder: (_) => const SelectProfileDialog()); return BottomSheetPage(builder: (_) => const SelectProfileDialog());
} }
} }
+1
View File
@@ -24,6 +24,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_mozilla_components/flutter_mozilla_components.dart'; import 'package:flutter_mozilla_components/flutter_mozilla_components.dart';
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
import 'package:nullability/nullability.dart'; import 'package:nullability/nullability.dart';
import 'package:weblibre/core/routing/widgets/bottom_sheet_page.dart';
import 'package:weblibre/core/routing/widgets/dialog_page.dart'; import 'package:weblibre/core/routing/widgets/dialog_page.dart';
import 'package:weblibre/domain/entities/profile.dart'; import 'package:weblibre/domain/entities/profile.dart';
import 'package:weblibre/features/about/presentation/screens/about.dart'; import 'package:weblibre/features/about/presentation/screens/about.dart';
+1 -1
View File
@@ -74,7 +74,7 @@ class SelectFeedDialogRoute extends GoRouteData with $SelectFeedDialogRoute {
), ),
); );
return DialogPage(builder: (_) => SelectFeedDialog(feedUris: feedUris)); return BottomSheetPage(builder: (_) => SelectFeedDialog(feedUris: feedUris));
} }
} }
@@ -0,0 +1,61 @@
/*
* Copyright (c) 2024-2025 Fabian Freund.
*
* This file is part of WebLibre
* (see https://weblibre.eu).
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import 'package:flutter/material.dart';
/// A bottom sheet page with Material entrance and exit animations.
/// Similar to DialogPage but displays content as a modal bottom sheet.
class BottomSheetPage<T> extends Page<T> {
final WidgetBuilder builder;
final Color? barrierColor;
final bool barrierDismissible;
final String? barrierLabel;
final bool isScrollControlled;
final bool useSafeArea;
const BottomSheetPage({
required this.builder,
this.barrierColor,
this.barrierDismissible = true,
this.barrierLabel,
this.isScrollControlled = true,
this.useSafeArea = true,
super.key,
super.name,
super.arguments,
super.restorationId,
});
@override
Route<T> createRoute(BuildContext context) => ModalBottomSheetRoute<T>(
settings: this,
builder: builder,
barrierLabel: barrierLabel ??
MaterialLocalizations.of(context).modalBarrierDismissLabel,
backgroundColor:
Theme.of(context).bottomSheetTheme.modalBackgroundColor,
elevation: Theme.of(context).bottomSheetTheme.modalElevation,
shape: Theme.of(context).bottomSheetTheme.shape,
clipBehavior: Clip.antiAlias,
constraints: Theme.of(context).bottomSheetTheme.constraints,
isScrollControlled: isScrollControlled,
isDismissible: barrierDismissible,
useSafeArea: useSafeArea,
);
}
@@ -25,18 +25,39 @@ import 'package:nullability/nullability.dart';
import 'package:weblibre/features/geckoview/features/browser/domain/services/browser_data.dart'; import 'package:weblibre/features/geckoview/features/browser/domain/services/browser_data.dart';
import 'package:weblibre/features/user/data/models/general_settings.dart'; import 'package:weblibre/features/user/data/models/general_settings.dart';
class DeleteDataDialog extends HookConsumerWidget { /// Shows a bottom sheet to select and delete browsing data.
Future<void> showDeleteDataDialog(
BuildContext context, {
Set<DeleteBrowsingDataType> initialSettings = const {},
}) {
return showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) => _DeleteDataSheet(initialSettings: initialSettings),
);
}
class _DeleteDataSheet extends HookConsumerWidget {
final Set<DeleteBrowsingDataType> initialSettings; final Set<DeleteBrowsingDataType> initialSettings;
const DeleteDataDialog({required this.initialSettings}); const _DeleteDataSheet({required this.initialSettings});
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
final selections = useState(initialSettings); final selections = useState(initialSettings);
return SimpleDialog( return SafeArea(
title: const Text('Delete Browsing Data'), child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [ children: [
Text(
'Delete Browsing Data',
style: Theme.of(context).textTheme.titleLarge,
),
const SizedBox(height: 16),
for (final type in DeleteBrowsingDataType.values) for (final type in DeleteBrowsingDataType.values)
CheckboxListTile.adaptive( CheckboxListTile.adaptive(
value: selections.value.contains(type), value: selections.value.contains(type),
@@ -53,10 +74,11 @@ class DeleteDataDialog extends HookConsumerWidget {
} }
}, },
), ),
Padding( const SizedBox(height: 16),
padding: const EdgeInsets.symmetric(horizontal: 24.0), FilledButton.icon(
child: FilledButton.icon( onPressed: selections.value.isEmpty
onPressed: () async { ? null
: () async {
await ref await ref
.read(browserDataServiceProvider.notifier) .read(browserDataServiceProvider.notifier)
.deleteData(selections.value); .deleteData(selections.value);
@@ -72,8 +94,9 @@ class DeleteDataDialog extends HookConsumerWidget {
label: const Text('Delete'), label: const Text('Delete'),
icon: const Icon(Icons.delete_forever), icon: const Icon(Icons.delete_forever),
), ),
),
], ],
),
),
); );
} }
} }
@@ -21,29 +21,43 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_mozilla_components/flutter_mozilla_components.dart'; import 'package:flutter_mozilla_components/flutter_mozilla_components.dart';
import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:weblibre/features/geckoview/features/bookmarks/presentation/widgets/folder_tree_picker.dart'; import 'package:weblibre/features/geckoview/features/bookmarks/presentation/widgets/folder_tree_picker.dart';
/// Dialog to select a bookmark folder. /// Bottom sheet to select a bookmark folder.
/// Returns the selected folder GUID or null if cancelled. /// Returns the selected folder GUID or null if cancelled.
Future<String?> showSelectFolderDialog(BuildContext context) { Future<String?> showSelectFolderDialog(BuildContext context) {
return showDialog<String>( return showModalBottomSheet<String>(
context: context, context: context,
builder: (context) => const _SelectFolderDialog(), isScrollControlled: true,
builder: (context) => const _SelectFolderSheet(),
); );
} }
class _SelectFolderDialog extends HookConsumerWidget { class _SelectFolderSheet extends HookConsumerWidget {
const _SelectFolderDialog(); const _SelectFolderSheet();
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
final selectedFolderGuid = useState(BookmarkRoot.mobile.id); final selectedFolderGuid = useState(BookmarkRoot.mobile.id);
return AlertDialog( return SafeArea(
title: const Text('Select folder'), child: Padding(
content: SizedBox( padding: const EdgeInsets.all(16),
width: double.maxFinite, child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
'Select folder',
style: Theme.of(context).textTheme.titleLarge,
),
const SizedBox(height: 16),
ConstrainedBox(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height * 0.5,
),
child: SingleChildScrollView( child: SingleChildScrollView(
child: FolderTreePicker( child: FolderTreePicker(
selectedFolderGuid: selectedFolderGuid, selectedFolderGuid: selectedFolderGuid,
@@ -51,16 +65,24 @@ class _SelectFolderDialog extends HookConsumerWidget {
), ),
), ),
), ),
actions: [ const SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton( TextButton(
onPressed: () => Navigator.of(context).pop(), onPressed: () => context.pop(),
child: const Text('Cancel'), child: const Text('Cancel'),
), ),
const SizedBox(width: 8),
FilledButton( FilledButton(
onPressed: () => Navigator.of(context).pop(selectedFolderGuid.value), onPressed: () => context.pop(selectedFolderGuid.value),
child: const Text('Select'), child: const Text('Select'),
), ),
], ],
),
],
),
),
); );
} }
} }
@@ -280,14 +280,10 @@ class HistoryScreen extends HookConsumerWidget {
else else
IconButton( IconButton(
onPressed: () async { onPressed: () async {
await showDialog( await showDeleteDataDialog(
context: context, context,
builder: (context) {
return const DeleteDataDialog(
initialSettings: {DeleteBrowsingDataType.history}, initialSettings: {DeleteBrowsingDataType.history},
); );
},
);
// ignore: unused_result // ignore: unused_result
await ref.refresh(browsingHistoryProvider.future); await ref.refresh(browsingHistoryProvider.future);
@@ -254,12 +254,7 @@ class _DeleteBrowsingDataTile extends StatelessWidget {
leading: const Icon(MdiIcons.databaseRemove), leading: const Icon(MdiIcons.databaseRemove),
trailing: const Icon(Icons.chevron_right), trailing: const Icon(Icons.chevron_right),
onTap: () async { onTap: () async {
await showDialog( await showDeleteDataDialog(context);
context: context,
builder: (context) {
return const DeleteDataDialog(initialSettings: {});
},
);
}, },
); );
} }
@@ -28,6 +28,7 @@ import 'package:weblibre/features/user/domain/repositories/profile.dart';
import 'package:weblibre/presentation/widgets/failure_widget.dart'; import 'package:weblibre/presentation/widgets/failure_widget.dart';
import 'package:weblibre/utils/exit_app.dart'; import 'package:weblibre/utils/exit_app.dart';
/// Bottom sheet widget to select a user profile.
class SelectProfileDialog extends HookConsumerWidget { class SelectProfileDialog extends HookConsumerWidget {
const SelectProfileDialog(); const SelectProfileDialog();
@@ -35,19 +36,31 @@ class SelectProfileDialog extends HookConsumerWidget {
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
final usersAsync = ref.watch(profileRepositoryProvider); final usersAsync = ref.watch(profileRepositoryProvider);
return AlertDialog( return SafeArea(
title: const Text('Users'), child: Padding(
scrollable: true, padding: const EdgeInsets.all(16),
content: usersAsync.when( child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
'Users',
style: Theme.of(context).textTheme.titleLarge,
),
const SizedBox(height: 16),
usersAsync.when(
skipLoadingOnReload: true, skipLoadingOnReload: true,
data: (profiles) => Column( data: (profiles) => Column(
mainAxisSize: MainAxisSize.min,
children: profiles.map((profile) { children: profiles.map((profile) {
final isSelected = filesystem.selectedProfile == profile.uuidValue; final isSelected =
filesystem.selectedProfile == profile.uuidValue;
return ListTile( return ListTile(
key: ValueKey(profile.id), key: ValueKey(profile.id),
enabled: !isSelected, enabled: !isSelected,
trailing: !isSelected ? const Icon(MdiIcons.accountSwitch) : null, trailing:
!isSelected ? const Icon(MdiIcons.accountSwitch) : null,
title: Text(profile.name), title: Text(profile.name),
subtitle: isSelected ? const Text('Active') : null, subtitle: isSelected ? const Text('Active') : null,
onTap: () async { onTap: () async {
@@ -64,8 +77,10 @@ class SelectProfileDialog extends HookConsumerWidget {
), ),
loading: () => const Center(child: CircularProgressIndicator()), loading: () => const Center(child: CircularProgressIndicator()),
), ),
actionsAlignment: MainAxisAlignment.spaceBetween, const SizedBox(height: 16),
actions: [ Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextButton.icon( TextButton.icon(
icon: const Icon(MdiIcons.power), icon: const Icon(MdiIcons.power),
iconAlignment: IconAlignment.start, iconAlignment: IconAlignment.start,
@@ -87,6 +102,10 @@ class SelectProfileDialog extends HookConsumerWidget {
}, },
), ),
], ],
),
],
),
),
); );
} }
} }
@@ -25,6 +25,7 @@ import 'package:weblibre/core/routing/routes.dart';
import 'package:weblibre/features/web_feed/domain/providers.dart'; import 'package:weblibre/features/web_feed/domain/providers.dart';
import 'package:weblibre/presentation/widgets/failure_widget.dart'; import 'package:weblibre/presentation/widgets/failure_widget.dart';
/// Bottom sheet widget to select a feed from discovered feeds.
class SelectFeedDialog extends HookConsumerWidget { class SelectFeedDialog extends HookConsumerWidget {
final Set<Uri> feedUris; final Set<Uri> feedUris;
@@ -32,10 +33,19 @@ class SelectFeedDialog extends HookConsumerWidget {
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
return SimpleDialog( return SafeArea(
title: const Text('Add Feed'), child: Padding(
children: feedUris padding: const EdgeInsets.all(16),
.map( child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
'Add Feed',
style: Theme.of(context).textTheme.titleLarge,
),
const SizedBox(height: 16),
...feedUris.map(
(uri) => HookConsumer( (uri) => HookConsumer(
builder: (context, ref, child) { builder: (context, ref, child) {
final feedAsync = ref.watch(fetchWebFeedProvider(uri)); final feedAsync = ref.watch(fetchWebFeedProvider(uri));
@@ -71,8 +81,10 @@ class SelectFeedDialog extends HookConsumerWidget {
); );
}, },
), ),
) ),
.toList(), ],
),
),
); );
} }
} }