Change router for different screen size
This commit is contained in:
171
lib/features/common/adaptive_root_scaffold.dart
Normal file
171
lib/features/common/adaptive_root_scaffold.dart
Normal 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,
|
||||
),
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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';
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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,
|
||||
);
|
||||
}
|
||||
50
lib/features/common/nested_app_bar.dart
Normal file
50
lib/features/common/nested_app_bar.dart
Normal 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,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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';
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user