Change router for different screen size

This commit is contained in:
problematicconsumer
2023-11-01 20:36:16 +03:30
parent d5dc2da60c
commit a21004761d
23 changed files with 446 additions and 366 deletions

View File

@@ -0,0 +1,171 @@
import 'package:flutter/material.dart';
import 'package:flutter_adaptive_scaffold/flutter_adaptive_scaffold.dart';
import 'package:hiddify/core/core_providers.dart';
import 'package:hiddify/core/router/router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
abstract interface class RootScaffold {
static final stateKey = GlobalKey<ScaffoldState>();
static bool canShowDrawer(BuildContext context) =>
Breakpoints.small.isActive(context);
}
class AdaptiveRootScaffold extends HookConsumerWidget {
const AdaptiveRootScaffold(this.navigator, {super.key});
final Widget navigator;
@override
Widget build(BuildContext context, WidgetRef ref) {
final t = ref.watch(translationsProvider);
final selectedIndex = getCurrentIndex(context);
final destinations = [
NavigationDestination(
icon: const Icon(Icons.power_settings_new),
label: t.home.pageTitle,
),
NavigationDestination(
icon: const Icon(Icons.filter_list),
label: t.proxies.pageTitle,
),
NavigationDestination(
icon: const Icon(Icons.article),
label: t.logs.pageTitle,
),
NavigationDestination(
icon: const Icon(Icons.settings),
label: t.settings.pageTitle,
),
NavigationDestination(
icon: const Icon(Icons.info),
label: t.about.pageTitle,
),
];
return _CustomAdaptiveScaffold(
selectedIndex: selectedIndex,
onSelectedIndexChange: (index) {
RootScaffold.stateKey.currentState?.closeDrawer();
switchTab(index, context);
},
destinations: destinations,
drawerDestinationRange: useMobileRouter ? (2, null) : (0, null),
bottomDestinationRange: (0, 2),
useBottomSheet: useMobileRouter,
body: navigator,
);
}
}
class _CustomAdaptiveScaffold extends HookConsumerWidget {
const _CustomAdaptiveScaffold({
required this.selectedIndex,
required this.onSelectedIndexChange,
required this.destinations,
required this.drawerDestinationRange,
required this.bottomDestinationRange,
this.useBottomSheet = false,
required this.body,
});
final int selectedIndex;
final Function(int) onSelectedIndexChange;
final List<NavigationDestination> destinations;
final (int, int?) drawerDestinationRange;
final (int, int?) bottomDestinationRange;
final bool useBottomSheet;
final Widget body;
List<NavigationDestination> destinationsSlice((int, int?) range) =>
destinations.sublist(range.$1, range.$2);
int? selectedWithOffset((int, int?) range) {
final index = selectedIndex - range.$1;
return index < 0 || (range.$2 != null && index > (range.$2! - 1))
? null
: index;
}
void selectWithOffset(int index, (int, int?) range) =>
onSelectedIndexChange(index + range.$1);
@override
Widget build(BuildContext context, WidgetRef ref) {
return Scaffold(
key: RootScaffold.stateKey,
drawer: Breakpoints.small.isActive(context)
? SafeArea(
child: Drawer(
width: (MediaQuery.sizeOf(context).width * 0.88).clamp(0, 304),
child: NavigationRail(
extended: true,
selectedIndex: selectedWithOffset(drawerDestinationRange),
destinations: destinationsSlice(drawerDestinationRange)
.map((_) => AdaptiveScaffold.toRailDestination(_))
.toList(),
onDestinationSelected: (index) =>
selectWithOffset(index, drawerDestinationRange),
),
),
)
: null,
body: AdaptiveLayout(
primaryNavigation: SlotLayout(
config: <Breakpoint, SlotLayoutConfig>{
Breakpoints.medium: SlotLayout.from(
key: const Key('primaryNavigation'),
builder: (_) => AdaptiveScaffold.standardNavigationRail(
selectedIndex: selectedIndex,
destinations: destinations
.map((_) => AdaptiveScaffold.toRailDestination(_))
.toList(),
onDestinationSelected: onSelectedIndexChange,
),
),
Breakpoints.large: SlotLayout.from(
key: const Key('primaryNavigation1'),
builder: (_) => AdaptiveScaffold.standardNavigationRail(
extended: true,
selectedIndex: selectedIndex,
destinations: destinations
.map((_) => AdaptiveScaffold.toRailDestination(_))
.toList(),
onDestinationSelected: onSelectedIndexChange,
),
),
},
),
bottomNavigation: useBottomSheet ||
Breakpoints.smallMobile.isActive(context)
? SlotLayout(
config: <Breakpoint, SlotLayoutConfig>{
Breakpoints.small: SlotLayout.from(
key: const Key('bottomNavigation'),
builder: (_) =>
AdaptiveScaffold.standardBottomNavigationBar(
currentIndex: selectedWithOffset(bottomDestinationRange),
destinations: destinationsSlice(bottomDestinationRange),
onDestinationSelected: (index) =>
selectWithOffset(index, bottomDestinationRange),
),
),
},
)
: null,
body: SlotLayout(
config: <Breakpoint, SlotLayoutConfig?>{
Breakpoints.standard: SlotLayout.from(
key: const Key('body'),
inAnimation: AdaptiveScaffold.fadeIn,
outAnimation: AdaptiveScaffold.fadeOut,
builder: (context) => body,
),
},
),
),
);
}
}

View File

@@ -1,7 +1,7 @@
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:hiddify/core/core_providers.dart';
import 'package:hiddify/core/prefs/prefs.dart';
import 'package:hiddify/core/router/routes/routes.dart';
import 'package:hiddify/core/router/router.dart';
import 'package:hiddify/data/data_providers.dart';
import 'package:hiddify/domain/app/app.dart';
import 'package:hiddify/features/common/new_version_dialog.dart';

View File

@@ -1,6 +1,5 @@
export 'app_update_notifier.dart';
export 'confirmation_dialogs.dart';
export 'custom_app_bar.dart';
export 'general_pref_tiles.dart';
export 'profile_tile.dart';
export 'qr_code_scanner_screen.dart';

View File

@@ -1,24 +0,0 @@
import 'package:flutter/material.dart';
abstract class RootScaffold {
static final stateKey = GlobalKey<ScaffoldState>();
}
class NestedTabAppBar extends SliverAppBar {
NestedTabAppBar({
super.key,
super.title,
super.actions,
super.pinned = true,
super.forceElevated,
super.bottom,
}) : super(
leading: RootScaffold.stateKey.currentState?.hasDrawer ?? false
? DrawerButton(
onPressed: () {
RootScaffold.stateKey.currentState?.openDrawer();
},
)
: null,
);
}

View File

@@ -0,0 +1,50 @@
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:hiddify/core/router/router.dart';
import 'package:hiddify/features/common/adaptive_root_scaffold.dart';
bool showDrawerButton(BuildContext context) {
if (!useMobileRouter) return true;
final String location = GoRouterState.of(context).uri.path;
if (location == const HomeRoute().location) return true;
if (location.startsWith(const ProxiesRoute().location)) return true;
return false;
}
class NestedAppBar extends StatelessWidget {
const NestedAppBar({
super.key,
this.title,
this.actions,
this.pinned = true,
this.forceElevated = false,
this.bottom,
});
final Widget? title;
final List<Widget>? actions;
final bool pinned;
final bool forceElevated;
final PreferredSizeWidget? bottom;
@override
Widget build(BuildContext context) {
RootScaffold.canShowDrawer(context);
return SliverAppBar(
leading: (RootScaffold.stateKey.currentState?.hasDrawer ?? false) &&
showDrawerButton(context)
? DrawerButton(
onPressed: () {
RootScaffold.stateKey.currentState?.openDrawer();
},
)
: null,
title: title,
actions: actions,
pinned: pinned,
forceElevated: forceElevated,
bottom: bottom,
);
}
}

View File

@@ -4,7 +4,7 @@ import 'package:gap/gap.dart';
import 'package:go_router/go_router.dart';
import 'package:hiddify/core/core_providers.dart';
import 'package:hiddify/core/prefs/prefs.dart';
import 'package:hiddify/core/router/routes/routes.dart';
import 'package:hiddify/core/router/router.dart';
import 'package:hiddify/domain/failures.dart';
import 'package:hiddify/domain/profiles/profiles.dart';
import 'package:hiddify/features/common/confirmation_dialogs.dart';

View File

@@ -14,9 +14,10 @@ class WindowController extends _$WindowController
Future<bool> build() async {
await windowManager.ensureInitialized();
const size = Size(868, 668);
const minumumSize = Size(368, 568);
const windowOptions = WindowOptions(
size: size,
minimumSize: size,
minimumSize: minumumSize,
center: true,
);
await windowManager.setPreventClose(true);