Fix FAB overlapping send button in wide/tablet master-detail layout
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:
@@ -52,18 +52,30 @@ class _ConversationsListScreenState
|
|||||||
children: [
|
children: [
|
||||||
SizedBox(
|
SizedBox(
|
||||||
width: 300,
|
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),
|
const VerticalDivider(width: 1),
|
||||||
Expanded(child: _buildDetailPane()),
|
Expanded(child: _buildDetailPane()),
|
||||||
],
|
],
|
||||||
)
|
)
|
||||||
: _buildListPane(convsAsync, isWide),
|
: _buildListPane(convsAsync, isWide),
|
||||||
floatingActionButton: FloatingActionButton(
|
floatingActionButton: isWide
|
||||||
heroTag: 'chat_fab',
|
? null
|
||||||
onPressed: () => _newConversation(isWide),
|
: FloatingActionButton(
|
||||||
child: const Icon(Icons.add),
|
heroTag: 'chat_fab',
|
||||||
),
|
onPressed: () => _newConversation(isWide),
|
||||||
|
child: const Icon(Icons.add),
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -35,18 +35,30 @@ class _NotesListScreenState extends ConsumerState<NotesListScreen> {
|
|||||||
children: [
|
children: [
|
||||||
SizedBox(
|
SizedBox(
|
||||||
width: 300,
|
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),
|
const VerticalDivider(width: 1),
|
||||||
Expanded(child: _buildDetailPane()),
|
Expanded(child: _buildDetailPane()),
|
||||||
],
|
],
|
||||||
)
|
)
|
||||||
: _buildListPane(notesAsync, isWide),
|
: _buildListPane(notesAsync, isWide),
|
||||||
floatingActionButton: FloatingActionButton(
|
floatingActionButton: isWide
|
||||||
heroTag: 'notes_fab',
|
? null
|
||||||
onPressed: () => context.push(Routes.noteNew),
|
: FloatingActionButton(
|
||||||
child: const Icon(Icons.add),
|
heroTag: 'notes_fab',
|
||||||
),
|
onPressed: () => context.push(Routes.noteNew),
|
||||||
|
child: const Icon(Icons.add),
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user