Merge pull request #156 from cogwheel0/navigation-drawer-and-dropdown-refactor
navigation-drawer-and-dropdown-refactor
This commit is contained in:
cogwheel
@@ -1331,41 +1331,44 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
|||||||
),
|
),
|
||||||
onPressed: _clearSelection,
|
onPressed: _clearSelection,
|
||||||
)
|
)
|
||||||
: (isTablet
|
: Builder(
|
||||||
? null // Hide menu button on tablets (drawer is always visible)
|
builder: (ctx) => Padding(
|
||||||
: Builder(
|
padding: const EdgeInsets.only(
|
||||||
builder: (ctx) => Padding(
|
left: Spacing.inputPadding,
|
||||||
padding: const EdgeInsets.only(
|
),
|
||||||
left: Spacing.inputPadding,
|
child: IconButton(
|
||||||
),
|
onPressed: () {
|
||||||
child: IconButton(
|
final layout = ResponsiveDrawerLayout.of(ctx);
|
||||||
onPressed: () {
|
if (layout == null) return;
|
||||||
// Suppress auto-focus and dismiss keyboard, then open drawer
|
|
||||||
try {
|
final isDrawerOpen = layout.isOpen;
|
||||||
ref
|
if (!isDrawerOpen) {
|
||||||
.read(
|
try {
|
||||||
composerAutofocusEnabledProvider
|
ref
|
||||||
.notifier,
|
.read(
|
||||||
)
|
composerAutofocusEnabledProvider
|
||||||
.set(false);
|
.notifier,
|
||||||
FocusManager.instance.primaryFocus
|
)
|
||||||
?.unfocus();
|
.set(false);
|
||||||
SystemChannels.textInput.invokeMethod(
|
FocusManager.instance.primaryFocus
|
||||||
'TextInput.hide',
|
?.unfocus();
|
||||||
);
|
SystemChannels.textInput.invokeMethod(
|
||||||
} catch (_) {}
|
'TextInput.hide',
|
||||||
ResponsiveDrawerLayout.of(ctx)?.open();
|
);
|
||||||
},
|
} catch (_) {}
|
||||||
icon: Icon(
|
}
|
||||||
Platform.isIOS
|
layout.toggle();
|
||||||
? CupertinoIcons.line_horizontal_3
|
},
|
||||||
: Icons.menu,
|
icon: Icon(
|
||||||
color: context.conduitTheme.textPrimary,
|
Platform.isIOS
|
||||||
size: IconSize.appBar,
|
? CupertinoIcons.line_horizontal_3
|
||||||
),
|
: Icons.menu,
|
||||||
),
|
color: context.conduitTheme.textPrimary,
|
||||||
),
|
size: IconSize.appBar,
|
||||||
)),
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
title: _isSelectionMode
|
title: _isSelectionMode
|
||||||
? Text(
|
? Text(
|
||||||
'${_selectedMessageIds.length} selected',
|
'${_selectedMessageIds.length} selected',
|
||||||
@@ -1374,225 +1377,301 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
|||||||
fontWeight: FontWeight.w500,
|
fontWeight: FontWeight.w500,
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
: GestureDetector(
|
: LayoutBuilder(
|
||||||
onTap: () async {
|
builder: (context, constraints) {
|
||||||
final modelsAsync = ref.read(modelsProvider);
|
return GestureDetector(
|
||||||
|
onTap: () async {
|
||||||
|
final modelsAsync = ref.read(modelsProvider);
|
||||||
|
|
||||||
// Handle all async states properly
|
// Handle all async states properly
|
||||||
if (modelsAsync.isLoading) {
|
if (modelsAsync.isLoading) {
|
||||||
// If still loading, wait for it to complete
|
// If still loading, wait for it to complete
|
||||||
try {
|
try {
|
||||||
final models = await ref.read(
|
final models = await ref.read(
|
||||||
modelsProvider.future,
|
modelsProvider.future,
|
||||||
|
);
|
||||||
|
// Check mounted and use context immediately
|
||||||
|
// together
|
||||||
|
if (!mounted) return;
|
||||||
|
// ignore: use_build_context_synchronously
|
||||||
|
_showModelDropdown(context, ref, models);
|
||||||
|
} catch (e) {
|
||||||
|
DebugLogger.error(
|
||||||
|
'model-load-failed',
|
||||||
|
scope: 'chat/model-selector',
|
||||||
|
error: e,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} else if (modelsAsync.hasValue) {
|
||||||
|
// If we have data, show immediately (no async
|
||||||
|
// gap)
|
||||||
|
_showModelDropdown(
|
||||||
|
context,
|
||||||
|
ref,
|
||||||
|
modelsAsync.value!,
|
||||||
|
);
|
||||||
|
} else if (modelsAsync.hasError) {
|
||||||
|
// If there's an error, try to refresh and
|
||||||
|
// load
|
||||||
|
try {
|
||||||
|
ref.invalidate(modelsProvider);
|
||||||
|
final models = await ref.read(
|
||||||
|
modelsProvider.future,
|
||||||
|
);
|
||||||
|
// Check mounted and use context immediately
|
||||||
|
// together
|
||||||
|
if (!mounted) return;
|
||||||
|
// ignore: use_build_context_synchronously
|
||||||
|
_showModelDropdown(context, ref, models);
|
||||||
|
} catch (e) {
|
||||||
|
DebugLogger.error(
|
||||||
|
'model-refresh-failed',
|
||||||
|
scope: 'chat/model-selector',
|
||||||
|
error: e,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLongPress: () {
|
||||||
|
final conversation = ref.read(
|
||||||
|
activeConversationProvider,
|
||||||
);
|
);
|
||||||
// Check mounted and use context immediately together
|
if (conversation == null) return;
|
||||||
if (!mounted) return;
|
showConversationContextMenu(
|
||||||
// ignore: use_build_context_synchronously
|
context: context,
|
||||||
_showModelDropdown(context, ref, models);
|
ref: ref,
|
||||||
} catch (e) {
|
conversation: conversation,
|
||||||
DebugLogger.error(
|
|
||||||
'model-load-failed',
|
|
||||||
scope: 'chat/model-selector',
|
|
||||||
error: e,
|
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
} else if (modelsAsync.hasValue) {
|
child: ConstrainedBox(
|
||||||
// If we have data, show immediately (no async gap)
|
constraints: BoxConstraints(
|
||||||
_showModelDropdown(
|
maxWidth: constraints.maxWidth,
|
||||||
context,
|
),
|
||||||
ref,
|
child: FittedBox(
|
||||||
modelsAsync.value!,
|
fit: BoxFit.scaleDown,
|
||||||
);
|
alignment: Alignment.center,
|
||||||
} else if (modelsAsync.hasError) {
|
child: Column(
|
||||||
// If there's an error, try to refresh and load
|
mainAxisSize: MainAxisSize.min,
|
||||||
try {
|
crossAxisAlignment:
|
||||||
ref.invalidate(modelsProvider);
|
CrossAxisAlignment.center,
|
||||||
final models = await ref.read(
|
children: [
|
||||||
modelsProvider.future,
|
AnimatedSwitcher(
|
||||||
);
|
duration: const Duration(
|
||||||
// Check mounted and use context immediately together
|
milliseconds: 250,
|
||||||
if (!mounted) return;
|
|
||||||
// ignore: use_build_context_synchronously
|
|
||||||
_showModelDropdown(context, ref, models);
|
|
||||||
} catch (e) {
|
|
||||||
DebugLogger.error(
|
|
||||||
'model-refresh-failed',
|
|
||||||
scope: 'chat/model-selector',
|
|
||||||
error: e,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onLongPress: () {
|
|
||||||
final conversation = ref.read(
|
|
||||||
activeConversationProvider,
|
|
||||||
);
|
|
||||||
if (conversation == null) return;
|
|
||||||
showConversationContextMenu(
|
|
||||||
context: context,
|
|
||||||
ref: ref,
|
|
||||||
conversation: conversation,
|
|
||||||
);
|
|
||||||
},
|
|
||||||
child: Column(
|
|
||||||
mainAxisSize: MainAxisSize.min,
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.center,
|
|
||||||
children: [
|
|
||||||
AnimatedSwitcher(
|
|
||||||
duration: const Duration(milliseconds: 250),
|
|
||||||
switchInCurve: Curves.easeOutCubic,
|
|
||||||
switchOutCurve: Curves.easeInCubic,
|
|
||||||
child: displayConversationTitle != null
|
|
||||||
? Column(
|
|
||||||
key: ValueKey<String>(
|
|
||||||
displayConversationTitle,
|
|
||||||
),
|
),
|
||||||
mainAxisSize: MainAxisSize.min,
|
switchInCurve: Curves.easeOutCubic,
|
||||||
children: [
|
switchOutCurve: Curves.easeInCubic,
|
||||||
StreamingTitleText(
|
child: displayConversationTitle != null
|
||||||
title: displayConversationTitle,
|
? Column(
|
||||||
style: AppTypography
|
key: ValueKey<String>(
|
||||||
.headlineSmallStyle
|
displayConversationTitle,
|
||||||
.copyWith(
|
),
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: [
|
||||||
|
StreamingTitleText(
|
||||||
|
title:
|
||||||
|
displayConversationTitle,
|
||||||
|
style: AppTypography
|
||||||
|
.headlineSmallStyle
|
||||||
|
.copyWith(
|
||||||
|
color: context
|
||||||
|
.conduitTheme
|
||||||
|
.textPrimary,
|
||||||
|
fontWeight:
|
||||||
|
FontWeight.w600,
|
||||||
|
fontSize: 18,
|
||||||
|
height: 1.3,
|
||||||
|
),
|
||||||
|
cursorColor: context
|
||||||
|
.conduitTheme
|
||||||
|
.textPrimary
|
||||||
|
.withValues(alpha: 0.8),
|
||||||
|
),
|
||||||
|
const SizedBox(
|
||||||
|
height: Spacing.xs,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
)
|
||||||
|
: const SizedBox.shrink(
|
||||||
|
key: ValueKey<String>(
|
||||||
|
'empty-title',
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Transform.translate(
|
||||||
|
offset: const Offset(0, 0),
|
||||||
|
child: () {
|
||||||
|
const double iconPaddingX =
|
||||||
|
Spacing.xs;
|
||||||
|
const double iconPaddingY =
|
||||||
|
Spacing.xxs;
|
||||||
|
const double iconWidth =
|
||||||
|
IconSize.small;
|
||||||
|
const double iconBoxWidth =
|
||||||
|
(iconPaddingX * 2) +
|
||||||
|
(BorderWidth.thin * 2) +
|
||||||
|
iconWidth;
|
||||||
|
final double maxLabelWidth =
|
||||||
|
(constraints.maxWidth -
|
||||||
|
(iconBoxWidth * 2) -
|
||||||
|
(Spacing.xs * 2))
|
||||||
|
.clamp(
|
||||||
|
48.0,
|
||||||
|
constraints.maxWidth,
|
||||||
|
);
|
||||||
|
|
||||||
|
final row = Row(
|
||||||
|
mainAxisAlignment:
|
||||||
|
MainAxisAlignment.center,
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: [
|
||||||
|
Opacity(
|
||||||
|
opacity: 0.0,
|
||||||
|
child: Container(
|
||||||
|
padding:
|
||||||
|
const EdgeInsets.symmetric(
|
||||||
|
horizontal:
|
||||||
|
iconPaddingX,
|
||||||
|
vertical: iconPaddingY,
|
||||||
|
),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: context
|
||||||
|
.conduitTheme
|
||||||
|
.surfaceBackground
|
||||||
|
.withValues(alpha: 0.3),
|
||||||
|
borderRadius:
|
||||||
|
BorderRadius.circular(
|
||||||
|
AppBorderRadius.badge,
|
||||||
|
),
|
||||||
|
border: Border.all(
|
||||||
|
color: context
|
||||||
|
.conduitTheme
|
||||||
|
.dividerColor,
|
||||||
|
width: BorderWidth.thin,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
child: Icon(
|
||||||
|
Platform.isIOS
|
||||||
|
? CupertinoIcons
|
||||||
|
.chevron_down
|
||||||
|
: Icons
|
||||||
|
.keyboard_arrow_down,
|
||||||
|
color: context
|
||||||
|
.conduitTheme
|
||||||
|
.iconSecondary,
|
||||||
|
size: iconWidth,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: Spacing.xs),
|
||||||
|
ConstrainedBox(
|
||||||
|
constraints: BoxConstraints(
|
||||||
|
maxWidth: maxLabelWidth,
|
||||||
|
),
|
||||||
|
child: MiddleEllipsisText(
|
||||||
|
modelLabel,
|
||||||
|
style: modelTextStyle,
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
semanticsLabel: modelLabel,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: Spacing.xs),
|
||||||
|
Container(
|
||||||
|
padding:
|
||||||
|
const EdgeInsets.symmetric(
|
||||||
|
horizontal: iconPaddingX,
|
||||||
|
vertical: iconPaddingY,
|
||||||
|
),
|
||||||
|
decoration: BoxDecoration(
|
||||||
color: context
|
color: context
|
||||||
.conduitTheme
|
.conduitTheme
|
||||||
.textPrimary,
|
.surfaceBackground
|
||||||
fontWeight: FontWeight.w600,
|
.withValues(alpha: 0.3),
|
||||||
fontSize: 18,
|
borderRadius:
|
||||||
height: 1.3,
|
BorderRadius.circular(
|
||||||
|
AppBorderRadius.badge,
|
||||||
|
),
|
||||||
|
border: Border.all(
|
||||||
|
color: context
|
||||||
|
.conduitTheme
|
||||||
|
.dividerColor,
|
||||||
|
width: BorderWidth.thin,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
cursorColor: context
|
child: Icon(
|
||||||
.conduitTheme
|
Platform.isIOS
|
||||||
.textPrimary
|
? CupertinoIcons
|
||||||
.withValues(alpha: 0.8),
|
.chevron_down
|
||||||
),
|
: Icons
|
||||||
const SizedBox(height: Spacing.xs),
|
.keyboard_arrow_down,
|
||||||
],
|
color: context
|
||||||
)
|
.conduitTheme
|
||||||
: const SizedBox.shrink(
|
.iconSecondary,
|
||||||
key: ValueKey<String>('empty-title'),
|
size: iconWidth,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
Transform.translate(
|
],
|
||||||
offset: const Offset(0, 0),
|
);
|
||||||
child: () {
|
final constrainedRow = ConstrainedBox(
|
||||||
final row = Row(
|
constraints: BoxConstraints(
|
||||||
mainAxisAlignment: MainAxisAlignment.center,
|
maxWidth: constraints.maxWidth,
|
||||||
mainAxisSize: MainAxisSize.min,
|
|
||||||
children: [
|
|
||||||
Opacity(
|
|
||||||
opacity: 0.0,
|
|
||||||
child: Container(
|
|
||||||
padding: const EdgeInsets.symmetric(
|
|
||||||
horizontal: Spacing.xs,
|
|
||||||
vertical: Spacing.xxs,
|
|
||||||
),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: context
|
|
||||||
.conduitTheme
|
|
||||||
.surfaceBackground
|
|
||||||
.withValues(alpha: 0.3),
|
|
||||||
borderRadius: BorderRadius.circular(
|
|
||||||
AppBorderRadius.badge,
|
|
||||||
),
|
),
|
||||||
border: Border.all(
|
child: row,
|
||||||
|
);
|
||||||
|
return hasConversationTitle
|
||||||
|
? SizedBox(
|
||||||
|
height: 24,
|
||||||
|
child: constrainedRow,
|
||||||
|
)
|
||||||
|
: constrainedRow;
|
||||||
|
}(),
|
||||||
|
),
|
||||||
|
if (isReviewerMode)
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.only(
|
||||||
|
top: 2.0,
|
||||||
|
),
|
||||||
|
child: Container(
|
||||||
|
padding: const EdgeInsets.symmetric(
|
||||||
|
horizontal: Spacing.sm,
|
||||||
|
vertical: 1.0,
|
||||||
|
),
|
||||||
|
decoration: BoxDecoration(
|
||||||
color: context
|
color: context
|
||||||
.conduitTheme
|
.conduitTheme
|
||||||
.dividerColor,
|
.success
|
||||||
width: BorderWidth.thin,
|
.withValues(alpha: 0.1),
|
||||||
|
borderRadius:
|
||||||
|
BorderRadius.circular(
|
||||||
|
AppBorderRadius.badge,
|
||||||
|
),
|
||||||
|
border: Border.all(
|
||||||
|
color: context
|
||||||
|
.conduitTheme
|
||||||
|
.success
|
||||||
|
.withValues(alpha: 0.3),
|
||||||
|
width: BorderWidth.thin,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
child: Text(
|
||||||
|
'REVIEWER MODE',
|
||||||
|
style: AppTypography.captionStyle
|
||||||
|
.copyWith(
|
||||||
|
color: context
|
||||||
|
.conduitTheme
|
||||||
|
.success,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
fontSize: 9,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
child: Icon(
|
|
||||||
Platform.isIOS
|
|
||||||
? CupertinoIcons.chevron_down
|
|
||||||
: Icons.keyboard_arrow_down,
|
|
||||||
color: context
|
|
||||||
.conduitTheme
|
|
||||||
.iconSecondary,
|
|
||||||
size: IconSize.small,
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
),
|
|
||||||
const SizedBox(width: Spacing.xs),
|
|
||||||
Flexible(
|
|
||||||
child: MiddleEllipsisText(
|
|
||||||
modelLabel,
|
|
||||||
style: modelTextStyle,
|
|
||||||
textAlign: TextAlign.center,
|
|
||||||
semanticsLabel: modelLabel,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SizedBox(width: Spacing.xs),
|
|
||||||
Container(
|
|
||||||
padding: const EdgeInsets.symmetric(
|
|
||||||
horizontal: Spacing.xs,
|
|
||||||
vertical: Spacing.xxs,
|
|
||||||
),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: context
|
|
||||||
.conduitTheme
|
|
||||||
.surfaceBackground
|
|
||||||
.withValues(alpha: 0.3),
|
|
||||||
borderRadius: BorderRadius.circular(
|
|
||||||
AppBorderRadius.badge,
|
|
||||||
),
|
|
||||||
border: Border.all(
|
|
||||||
color: context
|
|
||||||
.conduitTheme
|
|
||||||
.dividerColor,
|
|
||||||
width: BorderWidth.thin,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
child: Icon(
|
|
||||||
Platform.isIOS
|
|
||||||
? CupertinoIcons.chevron_down
|
|
||||||
: Icons.keyboard_arrow_down,
|
|
||||||
color: context
|
|
||||||
.conduitTheme
|
|
||||||
.iconSecondary,
|
|
||||||
size: IconSize.small,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
],
|
||||||
);
|
|
||||||
return hasConversationTitle
|
|
||||||
? SizedBox(height: 24, child: row)
|
|
||||||
: row;
|
|
||||||
}(),
|
|
||||||
),
|
|
||||||
if (isReviewerMode)
|
|
||||||
Padding(
|
|
||||||
padding: const EdgeInsets.only(top: 2.0),
|
|
||||||
child: Container(
|
|
||||||
padding: const EdgeInsets.symmetric(
|
|
||||||
horizontal: Spacing.sm,
|
|
||||||
vertical: 1.0,
|
|
||||||
),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: context.conduitTheme.success
|
|
||||||
.withValues(alpha: 0.1),
|
|
||||||
borderRadius: BorderRadius.circular(
|
|
||||||
AppBorderRadius.badge,
|
|
||||||
),
|
|
||||||
border: Border.all(
|
|
||||||
color: context.conduitTheme.success
|
|
||||||
.withValues(alpha: 0.3),
|
|
||||||
width: BorderWidth.thin,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
child: Text(
|
|
||||||
'REVIEWER MODE',
|
|
||||||
style: AppTypography.captionStyle
|
|
||||||
.copyWith(
|
|
||||||
color: context.conduitTheme.success,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
fontSize: 9,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
),
|
||||||
),
|
);
|
||||||
|
},
|
||||||
),
|
),
|
||||||
actions: [
|
actions: [
|
||||||
if (!_isSelectionMode) ...[
|
if (!_isSelectionMode) ...[
|
||||||
|
|||||||
@@ -1438,9 +1438,14 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
|
|||||||
container.read(chat.chatMessagesProvider.notifier).clearMessages();
|
container.read(chat.chatMessagesProvider.notifier).clearMessages();
|
||||||
|
|
||||||
// Close the slide drawer for faster perceived performance
|
// Close the slide drawer for faster perceived performance
|
||||||
// (only on mobile; on tablet, drawer stays visible)
|
// (only on mobile; keep tablet drawer unless user toggles it)
|
||||||
if (mounted) {
|
if (mounted) {
|
||||||
ResponsiveDrawerLayout.of(context)?.close();
|
final mediaQuery = MediaQuery.maybeOf(context);
|
||||||
|
final isTablet =
|
||||||
|
mediaQuery != null && mediaQuery.size.shortestSide >= 600;
|
||||||
|
if (!isTablet) {
|
||||||
|
ResponsiveDrawerLayout.of(context)?.close();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Load the full conversation details in the background
|
// Load the full conversation details in the background
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ import '../../shared/theme/theme_extensions.dart';
|
|||||||
///
|
///
|
||||||
/// On tablets (shortestSide >= 600), the drawer is always visible alongside
|
/// On tablets (shortestSide >= 600), the drawer is always visible alongside
|
||||||
/// the content. On mobile, it behaves like a standard slide drawer.
|
/// the content. On mobile, it behaves like a standard slide drawer.
|
||||||
|
/// Tablets can optionally dismiss the docked drawer to reclaim space.
|
||||||
class ResponsiveDrawerLayout extends StatefulWidget {
|
class ResponsiveDrawerLayout extends StatefulWidget {
|
||||||
final Widget child;
|
final Widget child;
|
||||||
final Widget drawer;
|
final Widget drawer;
|
||||||
@@ -26,6 +27,8 @@ class ResponsiveDrawerLayout extends StatefulWidget {
|
|||||||
|
|
||||||
// Tablet-specific configuration
|
// Tablet-specific configuration
|
||||||
final double tabletDrawerWidth; // Fixed width for tablet drawer
|
final double tabletDrawerWidth; // Fixed width for tablet drawer
|
||||||
|
final bool tabletDismissible;
|
||||||
|
final bool tabletInitiallyDocked;
|
||||||
|
|
||||||
const ResponsiveDrawerLayout({
|
const ResponsiveDrawerLayout({
|
||||||
super.key,
|
super.key,
|
||||||
@@ -42,6 +45,8 @@ class ResponsiveDrawerLayout extends StatefulWidget {
|
|||||||
this.contentBlurSigma = 2.0,
|
this.contentBlurSigma = 2.0,
|
||||||
this.onOpenStart,
|
this.onOpenStart,
|
||||||
this.tabletDrawerWidth = 320.0,
|
this.tabletDrawerWidth = 320.0,
|
||||||
|
this.tabletDismissible = true,
|
||||||
|
this.tabletInitiallyDocked = true,
|
||||||
});
|
});
|
||||||
|
|
||||||
static ResponsiveDrawerLayoutState? of(BuildContext context) =>
|
static ResponsiveDrawerLayoutState? of(BuildContext context) =>
|
||||||
@@ -58,6 +63,7 @@ class ResponsiveDrawerLayoutState extends State<ResponsiveDrawerLayout>
|
|||||||
duration: widget.duration,
|
duration: widget.duration,
|
||||||
value: 0.0,
|
value: 0.0,
|
||||||
);
|
);
|
||||||
|
late bool _isTabletDocked = widget.tabletInitiallyDocked;
|
||||||
|
|
||||||
bool _isTablet(BuildContext context) {
|
bool _isTablet(BuildContext context) {
|
||||||
final size = MediaQuery.of(context).size;
|
final size = MediaQuery.of(context).size;
|
||||||
@@ -73,7 +79,20 @@ class ResponsiveDrawerLayoutState extends State<ResponsiveDrawerLayout>
|
|||||||
double get _edgeWidth =>
|
double get _edgeWidth =>
|
||||||
MediaQuery.of(context).size.width * widget.edgeFraction;
|
MediaQuery.of(context).size.width * widget.edgeFraction;
|
||||||
|
|
||||||
bool get isOpen => _controller.value == 1.0;
|
bool get isOpen =>
|
||||||
|
_isTablet(context) ? _isTabletDocked : _controller.value == 1.0;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void didUpdateWidget(covariant ResponsiveDrawerLayout oldWidget) {
|
||||||
|
super.didUpdateWidget(oldWidget);
|
||||||
|
if (!widget.tabletDismissible && !_isTabletDocked) {
|
||||||
|
setState(() => _isTabletDocked = true);
|
||||||
|
} else if (widget.tabletInitiallyDocked !=
|
||||||
|
oldWidget.tabletInitiallyDocked &&
|
||||||
|
_isTablet(context)) {
|
||||||
|
setState(() => _isTabletDocked = widget.tabletInitiallyDocked);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Future<void> _animateTo(
|
Future<void> _animateTo(
|
||||||
double target, {
|
double target, {
|
||||||
@@ -99,8 +118,12 @@ class ResponsiveDrawerLayoutState extends State<ResponsiveDrawerLayout>
|
|||||||
}
|
}
|
||||||
|
|
||||||
void open({double velocity = 0.0}) {
|
void open({double velocity = 0.0}) {
|
||||||
// Only animate on mobile; on tablet, drawer is always visible
|
if (_isTablet(context)) {
|
||||||
if (_isTablet(context)) return;
|
if (!_isTabletDocked) {
|
||||||
|
setState(() => _isTabletDocked = true);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
widget.onOpenStart?.call();
|
widget.onOpenStart?.call();
|
||||||
@@ -110,15 +133,23 @@ class ResponsiveDrawerLayoutState extends State<ResponsiveDrawerLayout>
|
|||||||
}
|
}
|
||||||
|
|
||||||
void close({double velocity = 0.0}) {
|
void close({double velocity = 0.0}) {
|
||||||
// Only animate on mobile; on tablet, drawer is always visible
|
if (_isTablet(context)) {
|
||||||
if (_isTablet(context)) return;
|
if (!widget.tabletDismissible) return;
|
||||||
|
if (_isTabletDocked) {
|
||||||
|
setState(() => _isTabletDocked = false);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
_animateTo(0.0, velocity: velocity, easeOut: true);
|
_animateTo(0.0, velocity: velocity, easeOut: true);
|
||||||
}
|
}
|
||||||
|
|
||||||
void toggle() {
|
void toggle() {
|
||||||
// Only toggle on mobile; on tablet, drawer is always visible
|
if (_isTablet(context)) {
|
||||||
if (_isTablet(context)) return;
|
if (!widget.tabletDismissible) return;
|
||||||
|
setState(() => _isTabletDocked = !_isTabletDocked);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
isOpen ? close() : open();
|
isOpen ? close() : open();
|
||||||
}
|
}
|
||||||
@@ -189,18 +220,28 @@ class ResponsiveDrawerLayoutState extends State<ResponsiveDrawerLayout>
|
|||||||
}
|
}
|
||||||
|
|
||||||
Widget _buildTabletLayout(ConduitThemeExtension theme) {
|
Widget _buildTabletLayout(ConduitThemeExtension theme) {
|
||||||
|
final targetWidth = widget.tabletDismissible && !_isTabletDocked
|
||||||
|
? 0.0
|
||||||
|
: widget.tabletDrawerWidth;
|
||||||
return Row(
|
return Row(
|
||||||
children: [
|
children: [
|
||||||
// Persistent drawer
|
// Persistent drawer
|
||||||
Container(
|
AnimatedContainer(
|
||||||
width: widget.tabletDrawerWidth,
|
duration: widget.duration,
|
||||||
|
curve: widget.curve,
|
||||||
|
width: targetWidth,
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
color: theme.surfaceBackground,
|
color: theme.surfaceBackground,
|
||||||
border: Border(
|
border: Border(
|
||||||
right: BorderSide(color: theme.dividerColor, width: 1),
|
right: BorderSide(color: theme.dividerColor, width: 1),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
child: widget.drawer,
|
child: ClipRect(
|
||||||
|
child: IgnorePointer(
|
||||||
|
ignoring: widget.tabletDismissible && !_isTabletDocked,
|
||||||
|
child: widget.drawer,
|
||||||
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
// Content
|
// Content
|
||||||
Expanded(child: widget.child),
|
Expanded(child: widget.child),
|
||||||
|
|||||||
Reference in New Issue
Block a user