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

Remove AppBar gap from notes and tasks list screens

Browse Source 
Notes: no AppBar at all; a floating search icon (top-right corner)
triggers an inline search field above the list rather than an AppBar.

Tasks: no AppBar; TabBar sits directly at the top of the body, flush
with the quick-capture bar. The search icon lives to the right of the
tabs and expands a search field above them when tapped.

Both changes eliminate the ~56dp toolbar gap that was visible between
the quick-capture bar and the list content.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
bvandeusen
2026-03-01 11:49:46 -05:00
parent 2a35fe5532
commit 647b36837e
2 changed files with 221 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/screens/notes/notes_list_screen.dart
+50 -21
View File
@@ -21,21 +21,27 @@ class _NotesListScreenState extends ConsumerState<NotesListScreen> {
final notesAsync = ref.watch(notesProvider);
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: _showSearch
? TextField(
body: Stack(
children: [
Column(
children: [
if (_showSearch)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 4),
child: Row(
children: [
Expanded(
child: TextField(
autofocus: true,
decoration: const InputDecoration(
hintText: 'Search notes…',
border: InputBorder.none,
prefixIcon: Icon(Icons.search),
),
onChanged: (v) =>
setState(() => _search = v.trim().toLowerCase()),
)
: null,
actions: [
if (_showSearch)
),
),
IconButton(
icon: const Icon(Icons.close),
tooltip: 'Close search',
@@ -43,17 +49,14 @@ class _NotesListScreenState extends ConsumerState<NotesListScreen> {
_showSearch = false;
_search = '';
}),
)
else
IconButton(
icon: const Icon(Icons.search),
tooltip: 'Search',
onPressed: () => setState(() => _showSearch = true),
),
],
),
body: notesAsync.when(
loading: () => const Center(child: CircularProgressIndicator()),
),
Expanded(
child: notesAsync.when(
loading: () =>
const Center(child: CircularProgressIndicator()),
error: (_, _) => Center(
child: Column(
mainAxisSize: MainAxisSize.min,
@@ -97,22 +100,32 @@ class _NotesListScreenState extends ConsumerState<NotesListScreen> {
final note = filtered[i];
final preview = note.body
.split('\n')
.firstWhere((l) => l.trim().isNotEmpty, orElse: () => '')
.firstWhere((l) => l.trim().isNotEmpty,
orElse: () => '')
.trim();
return ListTile(
title: Text(note.title),
subtitle: Text(
preview.isNotEmpty
? preview
: note.updatedAt.toLocal().toString().substring(0, 16),
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
: note.updatedAt
.toLocal()
.toString()
.substring(0, 16),
style: Theme.of(context)
.textTheme
.bodySmall
?.copyWith(
color: Theme.of(context)
.colorScheme
.onSurfaceVariant,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
onTap: () => context.push(
Routes.noteDetail.replaceFirst(':id', '${note.id}'),
Routes.noteDetail
.replaceFirst(':id', '${note.id}'),
),
);
},
@@ -120,6 +133,22 @@ class _NotesListScreenState extends ConsumerState<NotesListScreen> {
);
},
),
),
],
),
// Floating search button — only visible when search is closed
if (!_showSearch)
Positioned(
top: 4,
right: 4,
child: IconButton(
icon: const Icon(Icons.search),
tooltip: 'Search',
onPressed: () => setState(() => _showSearch = true),
),
),
],
),
floatingActionButton: FloatingActionButton(
heroTag: 'notes_fab',
onPressed: () => context.push(Routes.noteNew),
lib/screens/tasks/tasks_list_screen.dart
+46 -23
View File
@@ -36,21 +36,26 @@ class _TasksListScreenState extends ConsumerState<TasksListScreen>
final tasksAsync = ref.watch(tasksProvider);
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: _showSearch
? TextField(
body: Column(
children: [
// Search field — appears above the tabs when active
if (_showSearch)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 4),
child: Row(
children: [
Expanded(
child: TextField(
autofocus: true,
decoration: const InputDecoration(
hintText: 'Search tasks…',
border: InputBorder.none,
prefixIcon: Icon(Icons.search),
),
onChanged: (v) =>
setState(() => _search = v.trim().toLowerCase()),
)
: null,
actions: [
if (_showSearch)
),
),
IconButton(
icon: const Icon(Icons.close),
tooltip: 'Close search',
@@ -58,15 +63,15 @@ class _TasksListScreenState extends ConsumerState<TasksListScreen>
_showSearch = false;
_search = '';
}),
)
else
IconButton(
icon: const Icon(Icons.search),
tooltip: 'Search',
onPressed: () => setState(() => _showSearch = true),
),
],
bottom: TabBar(
),
),
// Tab bar row — search icon sits to the right of the tabs
Row(
children: [
Expanded(
child: TabBar(
controller: _tabs,
tabs: const [
Tab(text: 'To Do'),
@@ -75,7 +80,17 @@ class _TasksListScreenState extends ConsumerState<TasksListScreen>
],
),
),
body: tasksAsync.when(
if (!_showSearch)
IconButton(
icon: const Icon(Icons.search),
tooltip: 'Search',
onPressed: () => setState(() => _showSearch = true),
),
],
),
// Content
Expanded(
child: tasksAsync.when(
loading: () => const Center(child: CircularProgressIndicator()),
error: (_, _) => Center(
child: Column(
@@ -98,15 +113,20 @@ class _TasksListScreenState extends ConsumerState<TasksListScreen>
: tasks
.where((t) =>
t.title.toLowerCase().contains(_search) ||
(t.description ?? '').toLowerCase().contains(_search))
(t.description ?? '')
.toLowerCase()
.contains(_search))
.toList();
final todo =
filtered.where((t) => t.status == TaskStatus.todo).toList();
final inProgress =
filtered.where((t) => t.status == TaskStatus.inProgress).toList();
final done =
filtered.where((t) => t.status == TaskStatus.done).toList();
final todo = filtered
.where((t) => t.status == TaskStatus.todo)
.toList();
final inProgress = filtered
.where((t) => t.status == TaskStatus.inProgress)
.toList();
final done = filtered
.where((t) => t.status == TaskStatus.done)
.toList();
return RefreshIndicator(
onRefresh: () => ref.refresh(tasksProvider.future),
@@ -121,6 +141,9 @@ class _TasksListScreenState extends ConsumerState<TasksListScreen>
);
},
),
),
],
),
floatingActionButton: FloatingActionButton(
heroTag: 'tasks_fab',
onPressed: () => context.push(Routes.taskNew),