feat(#292): shared app shell with hamburger nav drawer and pin
Epic A of the navigation redesign (#102). Adds AppShell, which owns the bottom QuickSwitchBar that Channels, Contacts, Map and Line-of-Sight each mounted separately, plus a left nav drawer: a transient slide-out on narrow layouts and a dockable panel that can be pinned open at >= 720px. - New lib/widgets/app_shell.dart. Reuses the 720px breakpoint established by settings_shell.dart. Pinned wide lays the panel out beside the body (Row), unpinned uses a standard Scaffold drawer so the hamburger is injected automatically; automaticallyImplyLeading:false was removed from the four app bars to allow that. - Pin state persists via UiViewStateService.navDrawerPinned. The load is placed before the channel-sort block in initialize(), which returns early and would otherwise skip it. - drawerContent is an empty slot here; the channel list fills it in Epic B (#289). Per owner decisions on #102 (2026-07-16): the bottom bar stays a bottom bar at every width (no left rail), and the drawer carries no view switcher, since the bottom bar owns view switching. flutter analyze clean, dart format applied. Not yet run on hardware.pull/324/head
Strycher
4 days ago
parent
006c365d25
commit
431b93f0fd
@ -0,0 +1,153 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import '../services/ui_view_state_service.dart';
|
||||
import 'quick_switch_bar.dart';
|
||||
|
||||
/// Shared shell for the primary views (Contacts / Channels / Map).
|
||||
///
|
||||
/// Owns the bottom [QuickSwitchBar] that each view previously mounted itself,
|
||||
/// plus the left nav drawer: a transient slide-out on narrow layouts, and a
|
||||
/// dockable pane that can be pinned open on wide ones.
|
||||
///
|
||||
/// The bottom bar stays a bottom bar at every width; it never becomes a rail.
|
||||
class AppShell extends StatelessWidget {
|
||||
static const double wideBreakpoint = 720;
|
||||
static const double _drawerWidth = 300;
|
||||
|
||||
final int selectedIndex;
|
||||
final ValueChanged<int> onDestinationSelected;
|
||||
final int contactsUnreadCount;
|
||||
final int channelsUnreadCount;
|
||||
|
||||
final PreferredSizeWidget? appBar;
|
||||
final Widget body;
|
||||
final Widget? floatingActionButton;
|
||||
|
||||
/// List content for the active view. Null renders an empty drawer body.
|
||||
final Widget? drawerContent;
|
||||
|
||||
const AppShell({
|
||||
super.key,
|
||||
required this.selectedIndex,
|
||||
required this.onDestinationSelected,
|
||||
required this.body,
|
||||
this.appBar,
|
||||
this.floatingActionButton,
|
||||
this.drawerContent,
|
||||
this.contactsUnreadCount = 0,
|
||||
this.channelsUnreadCount = 0,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final isWide = constraints.maxWidth >= wideBreakpoint;
|
||||
final pinned =
|
||||
isWide && context.watch<UiViewStateService>().navDrawerPinned;
|
||||
|
||||
return pinned
|
||||
? _buildPinned(context)
|
||||
: _buildTransient(context, isWide);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _bottomBar() {
|
||||
return SafeArea(
|
||||
top: false,
|
||||
child: QuickSwitchBar(
|
||||
selectedIndex: selectedIndex,
|
||||
onDestinationSelected: onDestinationSelected,
|
||||
contactsUnreadCount: contactsUnreadCount,
|
||||
channelsUnreadCount: channelsUnreadCount,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Wide + pinned: the panel is laid out beside the body, not overlaid.
|
||||
Widget _buildPinned(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: appBar,
|
||||
body: SafeArea(
|
||||
top: false,
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
SizedBox(
|
||||
width: _drawerWidth,
|
||||
child: _NavPanel(isWide: true, content: drawerContent),
|
||||
),
|
||||
const VerticalDivider(width: 1),
|
||||
Expanded(child: body),
|
||||
],
|
||||
),
|
||||
),
|
||||
floatingActionButton: floatingActionButton,
|
||||
bottomNavigationBar: _bottomBar(),
|
||||
);
|
||||
}
|
||||
|
||||
/// Narrow, or wide-but-unpinned: standard transient drawer. Scaffold injects
|
||||
/// the hamburger into the app bar automatically.
|
||||
Widget _buildTransient(BuildContext context, bool isWide) {
|
||||
return Scaffold(
|
||||
appBar: appBar,
|
||||
drawer: Drawer(
|
||||
width: _drawerWidth,
|
||||
child: _NavPanel(isWide: isWide, content: drawerContent),
|
||||
),
|
||||
body: body,
|
||||
floatingActionButton: floatingActionButton,
|
||||
bottomNavigationBar: _bottomBar(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Drawer contents. The pin control appears only on wide layouts, where
|
||||
/// docking the panel open is useful.
|
||||
class _NavPanel extends StatelessWidget {
|
||||
final bool isWide;
|
||||
final Widget? content;
|
||||
|
||||
const _NavPanel({required this.isWide, this.content});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final uiState = context.watch<UiViewStateService>();
|
||||
final pinned = uiState.navDrawerPinned;
|
||||
|
||||
return SafeArea(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
if (isWide)
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 8, 8, 8),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
MaterialLocalizations.of(context).drawerLabel,
|
||||
style: Theme.of(context).textTheme.titleSmall,
|
||||
),
|
||||
),
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
pinned ? Icons.push_pin : Icons.push_pin_outlined,
|
||||
),
|
||||
isSelected: pinned,
|
||||
tooltip: pinned ? 'Unpin panel' : 'Pin panel open',
|
||||
onPressed: () => uiState.setNavDrawerPinned(!pinned),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
if (isWide) const Divider(height: 1),
|
||||
Expanded(child: content ?? const SizedBox.shrink()),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue