ars/iiEsaywebUIapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(navigation): Adjust bottom padding for safe area in chats drawer

Browse Source
This commit is contained in:
cogwheel0
2025-12-15 20:17:56 +05:30
parent 5396fb8eec
commit 7619040e27
7 changed files with 495 additions and 771 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
lib/features/chat/views/chat_page.dart
View File

@@ -956,57 +956,9 @@ class _ChatPageState extends ConsumerState<ChatPage> {
required Widget child,
bool isCircular = false,
}) {
final theme = Theme.of(context);
final isDark = theme.brightness == Brightness.dark;
// Use same high-contrast colors as the floating chat input
final backgroundColor = isDark
? Color.lerp(context.conduitTheme.cardBackground, Colors.white, 0.08)!
: Color.lerp(context.conduitTheme.inputBackground, Colors.black, 0.06)!;
final borderColor = context.conduitTheme.cardBorder.withValues(
alpha: isDark ? 0.65 : 0.55,
);
final borderRadius = isCircular
? BorderRadius.circular(100)
: BorderRadius.circular(AppBorderRadius.pill);
// For circular buttons, ensure the entire widget is constrained to a square
if (isCircular) {
return SizedBox(
width: 44,
height: 44,
child: ClipRRect(
borderRadius: borderRadius,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: Container(
decoration: BoxDecoration(
color: backgroundColor.withValues(alpha: 0.85),
borderRadius: borderRadius,
border: Border.all(color: borderColor, width: BorderWidth.thin),
),
child: Center(child: child),
),
),
),
);
}
return ClipRRect(
borderRadius: borderRadius,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: Container(
decoration: BoxDecoration(
color: backgroundColor.withValues(alpha: 0.85),
borderRadius: borderRadius,
border: Border.all(color: borderColor, width: BorderWidth.thin),
),
return FloatingAppBarPill(
isCircular: isCircular,
child: child,
),
),
);
}

48
lib/features/navigation/widgets/chats_drawer.dart
View File

@@ -1,6 +1,5 @@
import 'dart:async';
import 'dart:io' show Platform;
import 'dart:ui' show ImageFilter;
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
@@ -23,6 +22,7 @@ import '../../../core/utils/user_avatar_utils.dart';
import '../../../shared/utils/conversation_context_menu.dart';
import '../../../shared/widgets/user_avatar.dart';
import '../../../shared/widgets/model_avatar.dart';
import '../../../shared/widgets/conduit_components.dart';
import '../../../shared/widgets/responsive_drawer_layout.dart';
import '../../../core/models/model.dart';
import '../../../core/models/conversation.dart';
@@ -268,28 +268,9 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
}
Widget _buildFloatingSearchField(BuildContext context) {
final theme = Theme.of(context);
final conduitTheme = context.conduitTheme;
final isDark = theme.brightness == Brightness.dark;
final backgroundColor = isDark
? Color.lerp(conduitTheme.cardBackground, Colors.white, 0.08)!
: Color.lerp(conduitTheme.inputBackground, Colors.black, 0.06)!;
final borderColor = conduitTheme.cardBorder.withValues(
alpha: isDark ? 0.65 : 0.55,
);
return ClipRRect(
borderRadius: BorderRadius.circular(AppBorderRadius.pill),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: Container(
decoration: BoxDecoration(
color: backgroundColor.withValues(alpha: 0.85),
borderRadius: BorderRadius.circular(AppBorderRadius.pill),
border: Border.all(color: borderColor, width: BorderWidth.thin),
),
return FloatingAppBarPill(
child: Material(
color: Colors.transparent,
child: TextField(
@@ -345,8 +326,6 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
),
),
),
),
),
);
}
@@ -1700,9 +1679,7 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
}
Widget _buildFloatingBottomSection(BuildContext context) {
final theme = Theme.of(context);
final conduitTheme = context.conduitTheme;
final isDark = theme.brightness == Brightness.dark;
final authUser = ref.watch(currentUserProvider2);
final asyncUser = ref.watch(currentUserProvider);
final user = asyncUser.maybeWhen(
@@ -1722,30 +1699,14 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
final initial = initialFor(displayName);
final avatarUrl = resolveUserAvatarUrlForUser(api, user);
final backgroundColor = isDark
? Color.lerp(conduitTheme.cardBackground, Colors.white, 0.08)!
: Color.lerp(conduitTheme.inputBackground, Colors.black, 0.06)!;
final borderColor = conduitTheme.cardBorder.withValues(
alpha: isDark ? 0.65 : 0.55,
);
if (user == null) return const SizedBox.shrink();
return ClipRRect(
borderRadius: BorderRadius.circular(AppBorderRadius.pill),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: Container(
return FloatingAppBarPill(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.sm,
vertical: Spacing.xs,
),
decoration: BoxDecoration(
color: backgroundColor.withValues(alpha: 0.85),
borderRadius: BorderRadius.circular(AppBorderRadius.pill),
border: Border.all(color: borderColor, width: BorderWidth.thin),
),
child: Row(
children: [
Container(
@@ -1815,7 +1776,6 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
],
),
),
),
);
}
}

51
lib/features/notes/views/note_editor_page.dart
View File

@@ -15,6 +15,7 @@ import '../../../core/providers/app_providers.dart';
import '../../../core/widgets/error_boundary.dart';
import '../../../shared/theme/theme_extensions.dart';
import '../../../shared/utils/ui_utils.dart';
import '../../../shared/widgets/conduit_components.dart';
import '../../../shared/widgets/improved_loading_states.dart';
import '../../../shared/widgets/middle_ellipsis_text.dart';
import '../../../shared/widgets/themed_dialogs.dart';
@@ -815,55 +816,9 @@ class _NoteEditorPageState extends ConsumerState<NoteEditorPage> {
Widget child, {
bool isCircular = false,
}) {
final theme = Theme.of(context);
final isDark = theme.brightness == Brightness.dark;
final backgroundColor = isDark
? Color.lerp(context.conduitTheme.cardBackground, Colors.white, 0.08)!
: Color.lerp(context.conduitTheme.inputBackground, Colors.black, 0.06)!;
final borderColor = context.conduitTheme.cardBorder.withValues(
alpha: isDark ? 0.65 : 0.55,
);
final borderRadius = isCircular
? BorderRadius.circular(100)
: BorderRadius.circular(AppBorderRadius.pill);
if (isCircular) {
return SizedBox(
width: 44,
height: 44,
child: ClipRRect(
borderRadius: borderRadius,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: Container(
decoration: BoxDecoration(
color: backgroundColor.withValues(alpha: 0.85),
borderRadius: borderRadius,
border: Border.all(color: borderColor, width: BorderWidth.thin),
),
child: Center(child: child),
),
),
),
);
}
return ClipRRect(
borderRadius: borderRadius,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: Container(
decoration: BoxDecoration(
color: backgroundColor.withValues(alpha: 0.85),
borderRadius: borderRadius,
border: Border.all(color: borderColor, width: BorderWidth.thin),
),
return FloatingAppBarPill(
isCircular: isCircular,
child: child,
),
),
);
}

197
lib/features/notes/views/notes_list_page.dart
View File

@@ -1,6 +1,5 @@
import 'dart:async';
import 'dart:io' show Platform;
import 'dart:ui' show ImageFilter;
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
@@ -15,7 +14,7 @@ import '../../../core/providers/app_providers.dart';
import '../../../core/services/navigation_service.dart';
import '../../../core/widgets/error_boundary.dart';
import '../../../shared/theme/theme_extensions.dart';
import '../../../shared/utils/ui_utils.dart';
import '../../../shared/widgets/conduit_components.dart';
import '../../../shared/widgets/improved_loading_states.dart';
import '../../../shared/widgets/loading_states.dart';
import '../../../shared/widgets/themed_dialogs.dart';
@@ -130,112 +129,16 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
child: Scaffold(
backgroundColor: context.conduitTheme.surfaceBackground,
extendBodyBehindAppBar: true,
appBar: PreferredSize(
preferredSize: const Size.fromHeight(kToolbarHeight + 64),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: const [0.0, 0.4, 1.0],
colors: [
Theme.of(context).scaffoldBackgroundColor,
Theme.of(context).scaffoldBackgroundColor.withValues(
alpha: 0.85,
),
Theme.of(context).scaffoldBackgroundColor.withValues(
alpha: 0.0,
),
],
),
),
child: SafeArea(
bottom: false,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// App bar row with back button and title
SizedBox(
height: kToolbarHeight,
child: Row(
children: [
// Leading (back button)
if (canPop)
Padding(
padding: const EdgeInsets.only(
left: Spacing.inputPadding,
),
child: Center(
child: GestureDetector(
onTap: () => Navigator.of(context).maybePop(),
child: _buildAppBarPill(
context,
Icon(
UiUtils.platformIcon(
ios: CupertinoIcons.back,
android: Icons.arrow_back,
),
color: context.conduitTheme.textPrimary,
size: IconSize.appBar,
),
isCircular: true,
),
),
),
)
else
const SizedBox(width: Spacing.inputPadding),
// Title centered
Expanded(
child: Center(
child: _buildAppBarPill(
context,
Padding(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.md,
vertical: Spacing.xs,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Platform.isIOS
appBar: FloatingAppBar(
leading: canPop ? const FloatingAppBarBackButton() : null,
title: FloatingAppBarTitle(
text: l10n.notes,
icon: Platform.isIOS
? CupertinoIcons.doc_text_fill
: Icons.notes_rounded,
color: context.conduitTheme.textPrimary
.withValues(alpha: 0.7),
size: IconSize.md,
),
const SizedBox(width: Spacing.sm),
Text(
l10n.notes,
style:
AppTypography.headlineSmallStyle
.copyWith(
color: context
.conduitTheme
.textPrimary,
fontWeight: FontWeight.w600,
),
),
],
),
),
),
),
),
// Trailing spacer to balance
if (canPop)
const SizedBox(
width: 44 + Spacing.inputPadding,
)
else
const SizedBox(width: Spacing.inputPadding),
],
),
),
// Search bar directly below title
Padding(
bottomHeight: 64,
bottom: Padding(
padding: const EdgeInsets.fromLTRB(
Spacing.inputPadding,
Spacing.xs,
@@ -244,10 +147,6 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
),
child: _buildFloatingSearchField(context),
),
],
),
),
),
),
body: _buildBody(context),
floatingActionButton: _buildFAB(context),
@@ -255,87 +154,11 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
);
}
Widget _buildAppBarPill(
BuildContext context,
Widget child, {
bool isCircular = false,
}) {
final theme = Theme.of(context);
final isDark = theme.brightness == Brightness.dark;
final backgroundColor = isDark
? Color.lerp(context.conduitTheme.cardBackground, Colors.white, 0.08)!
: Color.lerp(context.conduitTheme.inputBackground, Colors.black, 0.06)!;
final borderColor = context.conduitTheme.cardBorder.withValues(
alpha: isDark ? 0.65 : 0.55,
);
final borderRadius = isCircular
? BorderRadius.circular(100)
: BorderRadius.circular(AppBorderRadius.pill);
if (isCircular) {
return SizedBox(
width: 44,
height: 44,
child: ClipRRect(
borderRadius: borderRadius,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: Container(
decoration: BoxDecoration(
color: backgroundColor.withValues(alpha: 0.85),
borderRadius: borderRadius,
border: Border.all(color: borderColor, width: BorderWidth.thin),
),
child: Center(child: child),
),
),
),
);
}
return ClipRRect(
borderRadius: borderRadius,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: Container(
decoration: BoxDecoration(
color: backgroundColor.withValues(alpha: 0.85),
borderRadius: borderRadius,
border: Border.all(color: borderColor, width: BorderWidth.thin),
),
child: child,
),
),
);
}
Widget _buildFloatingSearchField(BuildContext context) {
final theme = Theme.of(context);
final conduitTheme = context.conduitTheme;
final isDark = theme.brightness == Brightness.dark;
final l10n = AppLocalizations.of(context)!;
final backgroundColor = isDark
? Color.lerp(conduitTheme.cardBackground, Colors.white, 0.08)!
: Color.lerp(conduitTheme.inputBackground, Colors.black, 0.06)!;
final borderColor = conduitTheme.cardBorder.withValues(
alpha: isDark ? 0.65 : 0.55,
);
return ClipRRect(
borderRadius: BorderRadius.circular(AppBorderRadius.pill),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: Container(
decoration: BoxDecoration(
color: backgroundColor.withValues(alpha: 0.85),
borderRadius: BorderRadius.circular(AppBorderRadius.pill),
border: Border.all(color: borderColor, width: BorderWidth.thin),
),
return FloatingAppBarPill(
child: Material(
color: Colors.transparent,
child: TextField(
@@ -391,8 +214,6 @@ class _NotesListPageState extends ConsumerState<NotesListPage> {
),
),
),
),
),
);
}

142
lib/features/profile/views/app_customization_page.dart
View File

@@ -1,6 +1,5 @@
import 'dart:async';
import 'dart:io' show Platform;
import 'dart:ui' show ImageFilter;
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
@@ -48,88 +47,12 @@ class AppCustomizationPage extends ConsumerWidget {
final canPop = ModalRoute.of(context)?.canPop ?? false;
final topPadding = MediaQuery.of(context).padding.top + kToolbarHeight + 24;
final theme = Theme.of(context);
final conduitTheme = context.conduitTheme;
return Scaffold(
backgroundColor: conduitTheme.surfaceBackground,
backgroundColor: context.conduitTheme.surfaceBackground,
extendBodyBehindAppBar: true,
appBar: PreferredSize(
preferredSize: const Size.fromHeight(kToolbarHeight + 8),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: const [0.0, 0.4, 1.0],
colors: [
theme.scaffoldBackgroundColor,
theme.scaffoldBackgroundColor.withValues(alpha: 0.85),
theme.scaffoldBackgroundColor.withValues(alpha: 0.0),
],
),
),
child: SafeArea(
bottom: false,
child: SizedBox(
height: kToolbarHeight,
child: Row(
children: [
// Leading (back button)
if (canPop)
Padding(
padding: const EdgeInsets.only(left: Spacing.inputPadding),
child: Center(
child: GestureDetector(
onTap: () => Navigator.of(context).maybePop(),
child: _buildAppBarPill(
context,
Icon(
UiUtils.platformIcon(
ios: CupertinoIcons.back,
android: Icons.arrow_back,
),
color: conduitTheme.textPrimary,
size: IconSize.appBar,
),
isCircular: true,
),
),
),
)
else
const SizedBox(width: Spacing.inputPadding),
// Title centered
Expanded(
child: Center(
child: _buildAppBarPill(
context,
Padding(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.md,
vertical: Spacing.xs,
),
child: Text(
l10n.appCustomization,
style: AppTypography.headlineSmallStyle.copyWith(
color: conduitTheme.textPrimary,
fontWeight: FontWeight.w600,
),
),
),
),
),
),
// Trailing spacer to balance
if (canPop)
const SizedBox(width: 44 + Spacing.inputPadding)
else
const SizedBox(width: Spacing.inputPadding),
],
),
),
),
),
appBar: FloatingAppBar(
leading: canPop ? const FloatingAppBarBackButton() : null,
title: FloatingAppBarTitle(text: l10n.appCustomization),
),
body: ListView(
physics: const BouncingScrollPhysics(
@@ -170,63 +93,6 @@ class AppCustomizationPage extends ConsumerWidget {
);
}
Widget _buildAppBarPill(
BuildContext context,
Widget child, {
bool isCircular = false,
}) {
final theme = Theme.of(context);
final isDark = theme.brightness == Brightness.dark;
final backgroundColor = isDark
? Color.lerp(context.conduitTheme.cardBackground, Colors.white, 0.08)!
: Color.lerp(context.conduitTheme.inputBackground, Colors.black, 0.06)!;
final borderColor = context.conduitTheme.cardBorder.withValues(
alpha: isDark ? 0.65 : 0.55,
);
final borderRadius = isCircular
? BorderRadius.circular(100)
: BorderRadius.circular(AppBorderRadius.pill);
if (isCircular) {
return SizedBox(
width: 44,
height: 44,
child: ClipRRect(
borderRadius: borderRadius,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: Container(
decoration: BoxDecoration(
color: backgroundColor.withValues(alpha: 0.85),
borderRadius: borderRadius,
border: Border.all(color: borderColor, width: BorderWidth.thin),
),
child: Center(child: child),
),
),
),
);
}
return ClipRRect(
borderRadius: borderRadius,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: Container(
decoration: BoxDecoration(
color: backgroundColor.withValues(alpha: 0.85),
borderRadius: borderRadius,
border: Border.all(color: borderColor, width: BorderWidth.thin),
),
child: child,
),
),
);
}
Widget _buildThemesDropdownSection(
BuildContext context,
WidgetRef ref,

141
lib/features/profile/views/profile_page.dart
View File

@@ -9,7 +9,6 @@ import 'package:url_launcher/url_launcher_string.dart';
import 'package:conduit/l10n/app_localizations.dart';
import '../../../core/widgets/error_boundary.dart';
import '../../../shared/widgets/improved_loading_states.dart';
import 'dart:ui' show ImageFilter;
import '../../../shared/utils/ui_utils.dart';
import '../../../shared/widgets/themed_dialogs.dart';
@@ -68,151 +67,19 @@ class ProfilePage extends ConsumerWidget {
Scaffold _buildScaffold(BuildContext context, {required Widget body}) {
final canPop = ModalRoute.of(context)?.canPop ?? false;
final theme = Theme.of(context);
final l10n = AppLocalizations.of(context)!;
final conduitTheme = context.conduitTheme;
return Scaffold(
backgroundColor: conduitTheme.surfaceBackground,
backgroundColor: context.conduitTheme.surfaceBackground,
extendBodyBehindAppBar: true,
appBar: PreferredSize(
preferredSize: const Size.fromHeight(kToolbarHeight + 8),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: const [0.0, 0.4, 1.0],
colors: [
theme.scaffoldBackgroundColor,
theme.scaffoldBackgroundColor.withValues(alpha: 0.85),
theme.scaffoldBackgroundColor.withValues(alpha: 0.0),
],
),
),
child: SafeArea(
bottom: false,
child: SizedBox(
height: kToolbarHeight,
child: Row(
children: [
// Leading (back button)
if (canPop)
Padding(
padding: const EdgeInsets.only(left: Spacing.inputPadding),
child: Center(
child: GestureDetector(
onTap: () => Navigator.of(context).maybePop(),
child: _buildAppBarPill(
context,
Icon(
UiUtils.platformIcon(
ios: CupertinoIcons.back,
android: Icons.arrow_back,
),
color: conduitTheme.textPrimary,
size: IconSize.appBar,
),
isCircular: true,
),
),
),
)
else
const SizedBox(width: Spacing.inputPadding),
// Title centered
Expanded(
child: Center(
child: _buildAppBarPill(
context,
Padding(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.md,
vertical: Spacing.xs,
),
child: Text(
l10n.you,
style: AppTypography.headlineSmallStyle.copyWith(
color: conduitTheme.textPrimary,
fontWeight: FontWeight.w600,
),
),
),
),
),
),
// Trailing spacer to balance
if (canPop)
const SizedBox(width: 44 + Spacing.inputPadding)
else
const SizedBox(width: Spacing.inputPadding),
],
),
),
),
),
appBar: FloatingAppBar(
leading: canPop ? const FloatingAppBarBackButton() : null,
title: FloatingAppBarTitle(text: l10n.you),
),
body: body,
);
}
Widget _buildAppBarPill(
BuildContext context,
Widget child, {
bool isCircular = false,
}) {
final theme = Theme.of(context);
final isDark = theme.brightness == Brightness.dark;
final backgroundColor = isDark
? Color.lerp(context.conduitTheme.cardBackground, Colors.white, 0.08)!
: Color.lerp(context.conduitTheme.inputBackground, Colors.black, 0.06)!;
final borderColor = context.conduitTheme.cardBorder.withValues(
alpha: isDark ? 0.65 : 0.55,
);
final borderRadius = isCircular
? BorderRadius.circular(100)
: BorderRadius.circular(AppBorderRadius.pill);
if (isCircular) {
return SizedBox(
width: 44,
height: 44,
child: ClipRRect(
borderRadius: borderRadius,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: Container(
decoration: BoxDecoration(
color: backgroundColor.withValues(alpha: 0.85),
borderRadius: borderRadius,
border: Border.all(color: borderColor, width: BorderWidth.thin),
),
child: Center(child: child),
),
),
),
);
}
return ClipRRect(
borderRadius: borderRadius,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: Container(
decoration: BoxDecoration(
color: backgroundColor.withValues(alpha: 0.85),
borderRadius: borderRadius,
border: Border.all(color: borderColor, width: BorderWidth.thin),
),
child: child,
),
),
);
}
Widget _buildCenteredState(BuildContext context, Widget child) {
final topPadding = MediaQuery.of(context).padding.top + kToolbarHeight + 24;
return Padding(

303
lib/shared/widgets/conduit_components.dart
View File

@@ -1,3 +1,5 @@
import 'dart:ui' show ImageFilter;
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../theme/theme_extensions.dart';
@@ -10,6 +12,307 @@ import '../../core/services/settings_service.dart';
/// Unified component library following Conduit design patterns
/// This provides consistent, reusable UI components throughout the app
// =============================================================================
// FLOATING APP BAR COMPONENTS
// =============================================================================
/// A pill-shaped container with blur effect for floating app bar elements.
/// Used for back buttons, titles, and action buttons in the floating app bar.
class FloatingAppBarPill extends StatelessWidget {
final Widget child;
final bool isCircular;
const FloatingAppBarPill({
super.key,
required this.child,
this.isCircular = false,
});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final conduitTheme = context.conduitTheme;
final isDark = theme.brightness == Brightness.dark;
final backgroundColor = isDark
? Color.lerp(conduitTheme.cardBackground, Colors.white, 0.08)!
: Color.lerp(conduitTheme.inputBackground, Colors.black, 0.06)!;
final borderColor = conduitTheme.cardBorder.withValues(
alpha: isDark ? 0.65 : 0.55,
);
final borderRadius = isCircular
? BorderRadius.circular(100)
: BorderRadius.circular(AppBorderRadius.pill);
if (isCircular) {
return SizedBox(
width: 44,
height: 44,
child: ClipRRect(
borderRadius: borderRadius,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: Container(
decoration: BoxDecoration(
color: backgroundColor.withValues(alpha: 0.85),
borderRadius: borderRadius,
border: Border.all(color: borderColor, width: BorderWidth.thin),
),
child: Center(child: child),
),
),
),
);
}
return ClipRRect(
borderRadius: borderRadius,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
child: Container(
decoration: BoxDecoration(
color: backgroundColor.withValues(alpha: 0.85),
borderRadius: borderRadius,
border: Border.all(color: borderColor, width: BorderWidth.thin),
),
child: child,
),
),
);
}
}
/// A floating app bar with gradient background and pill-shaped elements.
/// Provides a consistent app bar style across the app with blur effects.
///
/// Supports:
/// - Simple title with optional leading/actions
/// - Custom title widget for complex layouts
/// - Bottom widget for search bars or other content
/// - Flexible actions positioning
class FloatingAppBar extends StatelessWidget implements PreferredSizeWidget {
/// Leading widget (typically a back button or menu button)
final Widget? leading;
/// Title widget - can be a simple [FloatingAppBarTitle] or custom widget
final Widget title;
/// Action widgets displayed on the right side
final List<Widget>? actions;
/// Bottom widget displayed below the main row (e.g., search bar)
final Widget? bottom;
/// Height of the bottom widget (used for preferredSize calculation)
final double bottomHeight;
/// Whether to show a trailing spacer when there's a leading widget but no actions
/// Set to false if you want the title to use all available space
final bool balanceLeading;
const FloatingAppBar({
super.key,
this.leading,
required this.title,
this.actions,
this.bottom,
this.bottomHeight = 0,
this.balanceLeading = true,
});
@override
Size get preferredSize => Size.fromHeight(kToolbarHeight + bottomHeight);
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: const [0.0, 0.4, 1.0],
colors: [
theme.scaffoldBackgroundColor,
theme.scaffoldBackgroundColor.withValues(alpha: 0.85),
theme.scaffoldBackgroundColor.withValues(alpha: 0.0),
],
),
),
child: SafeArea(
bottom: false,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
height: kToolbarHeight,
child: Row(
children: [
// Leading
if (leading != null)
Padding(
padding: const EdgeInsets.only(left: Spacing.inputPadding),
child: Center(child: leading),
)
else
const SizedBox(width: Spacing.inputPadding),
// Title centered
Expanded(
child: Center(child: title),
),
// Actions or trailing spacer
if (actions != null && actions!.isNotEmpty)
Row(
mainAxisSize: MainAxisSize.min,
children: actions!,
)
else if (leading != null && balanceLeading)
const SizedBox(width: 44 + Spacing.inputPadding)
else
const SizedBox(width: Spacing.inputPadding),
],
),
),
if (bottom != null) bottom!,
],
),
),
);
}
}
/// Helper to build a standard floating app bar title pill with text.
class FloatingAppBarTitle extends StatelessWidget {
final String text;
final IconData? icon;
const FloatingAppBarTitle({
super.key,
required this.text,
this.icon,
});
@override
Widget build(BuildContext context) {
final conduitTheme = context.conduitTheme;
return FloatingAppBarPill(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.md,
vertical: Spacing.xs,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (icon != null) ...[
Icon(
icon,
color: conduitTheme.textPrimary.withValues(alpha: 0.7),
size: IconSize.md,
),
const SizedBox(width: Spacing.sm),
],
Text(
text,
style: AppTypography.headlineSmallStyle.copyWith(
color: conduitTheme.textPrimary,
fontWeight: FontWeight.w600,
),
),
],
),
),
);
}
}
/// Helper to build a standard floating app bar back button.
class FloatingAppBarBackButton extends StatelessWidget {
final VoidCallback? onTap;
final IconData? icon;
const FloatingAppBarBackButton({
super.key,
this.onTap,
this.icon,
});
@override
Widget build(BuildContext context) {
final conduitTheme = context.conduitTheme;
final isIOS = Theme.of(context).platform == TargetPlatform.iOS;
return GestureDetector(
onTap: onTap ?? () => Navigator.of(context).maybePop(),
child: FloatingAppBarPill(
isCircular: true,
child: Icon(
icon ?? (isIOS ? Icons.arrow_back_ios_new : Icons.arrow_back),
color: conduitTheme.textPrimary,
size: IconSize.appBar,
),
),
);
}
}
/// Helper to build a floating app bar icon button (circular pill with icon).
class FloatingAppBarIconButton extends StatelessWidget {
final IconData icon;
final VoidCallback? onTap;
final Color? iconColor;
const FloatingAppBarIconButton({
super.key,
required this.icon,
this.onTap,
this.iconColor,
});
@override
Widget build(BuildContext context) {
final conduitTheme = context.conduitTheme;
return GestureDetector(
onTap: onTap,
child: FloatingAppBarPill(
isCircular: true,
child: Icon(
icon,
color: iconColor ?? conduitTheme.textPrimary,
size: IconSize.appBar,
),
),
);
}
}
/// Helper to build a floating app bar action with padding.
class FloatingAppBarAction extends StatelessWidget {
final Widget child;
const FloatingAppBarAction({
super.key,
required this.child,
});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(right: Spacing.inputPadding),
child: Center(child: child),
);
}
}
// =============================================================================
// EXISTING COMPONENTS
// =============================================================================
class ConduitButton extends ConsumerWidget {
final String text;
final VoidCallback? onPressed;