bvandeusen/FabledApp
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 32 Wiki Activity

Fix FAB overlapping send button in wide/tablet master-detail layout

Browse Source 
In wide mode, the floating action button defaulted to bottom-right of
the screen, sitting on top of the chat send button and note detail pane.

Replace the FAB with a pinned ListTile at the bottom of the list pane
in wide mode (New conversation / New note). The FAB is still used on
narrow/phone screens where there is no overlap.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
bvandeusen
2026-03-01 13:30:43 -05:00
parent fa9a2516b3
commit d01978ab46
2 changed files with 36 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/screens/chat/conversations_list_screen.dart
+18 -6
View File
@@ -52,18 +52,30 @@ class _ConversationsListScreenState
children: [
SizedBox(
width: 300,
child: _buildListPane(convsAsync, isWide),
child: Column(
children: [
Expanded(child: _buildListPane(convsAsync, isWide)),
const Divider(height: 1),
ListTile(
leading: const Icon(Icons.add),
title: const Text('New conversation'),
onTap: () => _newConversation(isWide),
),
],
),
),
const VerticalDivider(width: 1),
Expanded(child: _buildDetailPane()),
],
)
: _buildListPane(convsAsync, isWide),
floatingActionButton: FloatingActionButton(
heroTag: 'chat_fab',
onPressed: () => _newConversation(isWide),
child: const Icon(Icons.add),
),
floatingActionButton: isWide
? null
: FloatingActionButton(
heroTag: 'chat_fab',
onPressed: () => _newConversation(isWide),
child: const Icon(Icons.add),
),
);
}
lib/screens/notes/notes_list_screen.dart
+18 -6
View File
@@ -35,18 +35,30 @@ class _NotesListScreenState extends ConsumerState<NotesListScreen> {
children: [
SizedBox(
width: 300,
child: _buildListPane(notesAsync, isWide),
child: Column(
children: [
Expanded(child: _buildListPane(notesAsync, isWide)),
const Divider(height: 1),
ListTile(
leading: const Icon(Icons.add),
title: const Text('New note'),
onTap: () => context.push(Routes.noteNew),
),
],
),
),
const VerticalDivider(width: 1),
Expanded(child: _buildDetailPane()),
],
)
: _buildListPane(notesAsync, isWide),
floatingActionButton: FloatingActionButton(
heroTag: 'notes_fab',
onPressed: () => context.push(Routes.noteNew),
child: const Icon(Icons.add),
),
floatingActionButton: isWide
? null
: FloatingActionButton(
heroTag: 'notes_fab',
onPressed: () => context.push(Routes.noteNew),
child: const Icon(Icons.add),
),
);
}