feat: Refactor note editor dialog and delete confirmation for improved readability and reusability

This commit is contained in:
2026-05-21 16:26:31 +02:00
parent 49fc33edc0
commit 28f4ede4aa
3 changed files with 518 additions and 458 deletions
+392 -288
View File
@@ -316,12 +316,6 @@ class _HomeScreenState extends State<HomeScreen> {
final Widget body = _isLoading
? const Center(child: CircularProgressIndicator())
: visibleNotes.isEmpty
? _EmptyState(
showDeletedNotes: _showDeletedNotes,
categoryName: currentCategory?.name,
searchQuery: _searchQuery,
)
: RefreshIndicator(
onRefresh: () async {
await widget.onRequestSync();
@@ -330,295 +324,405 @@ class _HomeScreenState extends State<HomeScreen> {
cursor: _isDragging
? SystemMouseCursors.grabbing
: SystemMouseCursors.basic,
child: MasonryGridView.count(
crossAxisCount: crossAxisCount,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
itemCount: visibleNotes.length,
itemBuilder: (BuildContext context, int index) {
final List<Note> filteredNotes = visibleNotes;
return DragTarget<int>(
onAcceptWithDetails: (DragTargetDetails<int> details) {
final Note targetNote = filteredNotes[index];
final int originalTargetIndex = _notes.indexOf(
targetNote,
);
_reorderNote(details.data, originalTargetIndex);
},
builder: (context, candidateData, rejectedData) {
return LayoutBuilder(
builder: (context, constraints) {
final double cellWidth = constraints.maxWidth;
final bool requiresLongPressToDrag =
_requiresLongPressToDrag(_lastPointerKind);
child: CustomScrollView(
physics: const AlwaysScrollableScrollPhysics(),
slivers: visibleNotes.isEmpty
? [
SliverFillRemaining(
hasScrollBody: false,
child: _EmptyState(
showDeletedNotes: _showDeletedNotes,
categoryName: currentCategory?.name,
searchQuery: _searchQuery,
),
),
]
: [
SliverPadding(
padding: const EdgeInsets.only(bottom: 8),
sliver: SliverMasonryGrid.count(
crossAxisCount: crossAxisCount,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childCount: visibleNotes.length,
itemBuilder: (BuildContext context, int index) {
final List<Note> filteredNotes = visibleNotes;
return DragTarget<int>(
onAcceptWithDetails:
(DragTargetDetails<int> details) {
final Note targetNote =
filteredNotes[index];
final int originalTargetIndex = _notes
.indexOf(targetNote);
_reorderNote(
details.data,
originalTargetIndex,
);
},
builder: (context, candidateData, rejectedData) {
return LayoutBuilder(
builder: (context, constraints) {
final double cellWidth =
constraints.maxWidth;
final bool requiresLongPressToDrag =
_requiresLongPressToDrag(
_lastPointerKind,
);
final Widget draggableNote = requiresLongPressToDrag
? LongPressDraggable<int>(
data: _notes.indexOf(filteredNotes[index]),
delay: const Duration(milliseconds: 280),
onDragStarted: () {
if (!mounted) return;
setState(() {
_isDragging = true;
});
},
onDragEnd: (_) {
if (!mounted) return;
setState(() {
_isDragging = false;
});
},
onDraggableCanceled: (_, _) {
if (!mounted) return;
setState(() {
_isDragging = false;
});
},
feedback: MouseRegion(
cursor: SystemMouseCursors.grabbing,
child: Material(
color: Colors.transparent,
elevation: 8,
child: SizedBox(
width: cellWidth,
child: TweenAnimationBuilder<double>(
tween: Tween(begin: 0.97, end: 1.0),
duration: const Duration(
milliseconds: 180,
),
curve: Curves.easeOutCubic,
builder: (context, scale, child) {
return Transform.scale(
scale: scale,
alignment: Alignment.topLeft,
child: child,
);
},
child: Opacity(
opacity: 0.95,
child: NoteCard(
note: filteredNotes[index],
onTap: () {},
isDragging: true,
),
),
),
),
),
),
childWhenDragging: MouseRegion(
cursor: SystemMouseCursors.grabbing,
child: Opacity(
opacity: 0.3,
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: const Color.fromRGBO(
24,
25,
26,
1,
),
borderRadius: BorderRadius.circular(
12,
),
border: Border.all(
color: Colors.white24,
width: 1,
),
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
filteredNotes[index].title,
style: const TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold,
final Widget draggableNote =
requiresLongPressToDrag
? LongPressDraggable<int>(
data: _notes.indexOf(
filteredNotes[index],
),
maxLines: 2,
),
const SizedBox(height: 8),
Text(
filteredNotes[index].body,
style: const TextStyle(
color: Colors.white70,
fontSize: 14,
delay: const Duration(
milliseconds: 280,
),
onDragStarted: () {
if (!mounted) return;
setState(() {
_isDragging = true;
});
},
onDragEnd: (_) {
if (!mounted) return;
setState(() {
_isDragging = false;
});
},
onDraggableCanceled: (_, _) {
if (!mounted) return;
setState(() {
_isDragging = false;
});
},
feedback: MouseRegion(
cursor:
SystemMouseCursors.grabbing,
child: Material(
color: Colors.transparent,
elevation: 8,
child: SizedBox(
width: cellWidth,
child: TweenAnimationBuilder<double>(
tween: Tween(
begin: 0.97,
end: 1.0,
),
duration: const Duration(
milliseconds: 180,
),
curve:
Curves.easeOutCubic,
builder:
(
context,
scale,
child,
) {
return Transform.scale(
scale: scale,
alignment:
Alignment
.topLeft,
child: child,
);
},
child: Opacity(
opacity: 0.95,
child: NoteCard(
note:
filteredNotes[index],
onTap: () {},
isDragging: true,
),
),
),
),
),
),
childWhenDragging: MouseRegion(
cursor:
SystemMouseCursors.grabbing,
child: Opacity(
opacity: 0.3,
child: Container(
padding:
const EdgeInsets.all(
16,
),
decoration: BoxDecoration(
color:
const Color.fromRGBO(
24,
25,
26,
1,
),
borderRadius:
BorderRadius.circular(
12,
),
border: Border.all(
color: Colors.white24,
width: 1,
),
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment
.start,
mainAxisSize:
MainAxisSize.min,
children: [
Text(
filteredNotes[index]
.title,
style:
const TextStyle(
color: Colors
.white,
fontSize: 16,
fontWeight:
FontWeight
.bold,
),
maxLines: 2,
),
const SizedBox(
height: 8,
),
Text(
filteredNotes[index]
.body,
style:
const TextStyle(
color: Colors
.white70,
fontSize: 14,
),
maxLines: 20,
overflow:
TextOverflow.clip,
),
],
),
),
),
),
child: Container(
decoration: BoxDecoration(
border:
candidateData.isNotEmpty
? Border.all(
color: Colors
.blue
.shade400,
width: 2,
)
: null,
borderRadius:
BorderRadius.circular(12),
),
child: NoteCard(
key: ValueKey<String>(
filteredNotes[index].id,
),
note: filteredNotes[index],
onTap: () => _openNoteEditor(
filteredNotes[index],
),
isDragging: _isDragging,
),
),
maxLines: 20,
overflow: TextOverflow.clip,
),
],
),
),
),
),
child: Container(
decoration: BoxDecoration(
border: candidateData.isNotEmpty
? Border.all(
color: Colors.blue.shade400,
width: 2,
)
: null,
borderRadius: BorderRadius.circular(12),
),
child: NoteCard(
key: ValueKey<String>(
filteredNotes[index].id,
),
note: filteredNotes[index],
onTap: () =>
_openNoteEditor(filteredNotes[index]),
isDragging: _isDragging,
),
),
)
: Draggable<int>(
data: _notes.indexOf(filteredNotes[index]),
onDragStarted: () {
if (!mounted) return;
setState(() {
_isDragging = true;
});
},
onDragEnd: (_) {
if (!mounted) return;
setState(() {
_isDragging = false;
});
},
onDraggableCanceled: (_, _) {
if (!mounted) return;
setState(() {
_isDragging = false;
});
},
feedback: MouseRegion(
cursor: SystemMouseCursors.grabbing,
child: Material(
color: Colors.transparent,
elevation: 8,
child: SizedBox(
width: cellWidth,
child: TweenAnimationBuilder<double>(
tween: Tween(begin: 0.97, end: 1.0),
duration: const Duration(
milliseconds: 180,
),
curve: Curves.easeOutCubic,
builder: (context, scale, child) {
return Transform.scale(
scale: scale,
alignment: Alignment.topLeft,
child: child,
: Draggable<int>(
data: _notes.indexOf(
filteredNotes[index],
),
onDragStarted: () {
if (!mounted) return;
setState(() {
_isDragging = true;
});
},
onDragEnd: (_) {
if (!mounted) return;
setState(() {
_isDragging = false;
});
},
onDraggableCanceled: (_, _) {
if (!mounted) return;
setState(() {
_isDragging = false;
});
},
feedback: MouseRegion(
cursor:
SystemMouseCursors.grabbing,
child: Material(
color: Colors.transparent,
elevation: 8,
child: SizedBox(
width: cellWidth,
child: TweenAnimationBuilder<double>(
tween: Tween(
begin: 0.97,
end: 1.0,
),
duration: const Duration(
milliseconds: 180,
),
curve:
Curves.easeOutCubic,
builder:
(
context,
scale,
child,
) {
return Transform.scale(
scale: scale,
alignment:
Alignment
.topLeft,
child: child,
);
},
child: Opacity(
opacity: 0.95,
child: NoteCard(
note:
filteredNotes[index],
onTap: () {},
isDragging: true,
),
),
),
),
),
),
childWhenDragging: MouseRegion(
cursor:
SystemMouseCursors.grabbing,
child: Opacity(
opacity: 0.3,
child: Container(
padding:
const EdgeInsets.all(
16,
),
decoration: BoxDecoration(
color:
const Color.fromRGBO(
24,
25,
26,
1,
),
borderRadius:
BorderRadius.circular(
12,
),
border: Border.all(
color: Colors.white24,
width: 1,
),
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment
.start,
mainAxisSize:
MainAxisSize.min,
children: [
Text(
filteredNotes[index]
.title,
style:
const TextStyle(
color: Colors
.white,
fontSize: 16,
fontWeight:
FontWeight
.bold,
),
maxLines: 2,
overflow: TextOverflow
.ellipsis,
),
const SizedBox(
height: 8,
),
Text(
filteredNotes[index]
.body,
style:
const TextStyle(
color: Colors
.white70,
fontSize: 14,
),
maxLines: 20,
overflow:
TextOverflow.clip,
),
],
),
),
),
),
child: Container(
decoration: BoxDecoration(
border:
candidateData.isNotEmpty
? Border.all(
color: Colors
.blue
.shade400,
width: 2,
)
: null,
borderRadius:
BorderRadius.circular(12),
),
child: NoteCard(
key: ValueKey<String>(
filteredNotes[index].id,
),
note: filteredNotes[index],
onTap: () => _openNoteEditor(
filteredNotes[index],
),
isDragging: _isDragging,
),
),
);
},
child: Opacity(
opacity: 0.95,
child: NoteCard(
note: filteredNotes[index],
onTap: () {},
isDragging: true,
),
),
),
),
),
),
childWhenDragging: MouseRegion(
cursor: SystemMouseCursors.grabbing,
child: Opacity(
opacity: 0.3,
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: const Color.fromRGBO(
24,
25,
26,
1,
),
borderRadius: BorderRadius.circular(
12,
),
border: Border.all(
color: Colors.white24,
width: 1,
),
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
filteredNotes[index].title,
style: const TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 8),
Text(
filteredNotes[index].body,
style: const TextStyle(
color: Colors.white70,
fontSize: 14,
),
maxLines: 20,
overflow: TextOverflow.clip,
),
],
),
),
),
),
child: Container(
decoration: BoxDecoration(
border: candidateData.isNotEmpty
? Border.all(
color: Colors.blue.shade400,
width: 2,
)
: null,
borderRadius: BorderRadius.circular(12),
),
child: NoteCard(
key: ValueKey<String>(
filteredNotes[index].id,
),
note: filteredNotes[index],
onTap: () =>
_openNoteEditor(filteredNotes[index]),
isDragging: _isDragging,
),
),
);
return Listener(
onPointerDown: (PointerDownEvent event) {
if (_lastPointerKind == event.kind) {
return;
}
return Listener(
onPointerDown:
(PointerDownEvent event) {
if (_lastPointerKind ==
event.kind) {
return;
}
setState(() {
_lastPointerKind = event.kind;
});
setState(() {
_lastPointerKind = event.kind;
});
},
child: draggableNote,
);
},
);
},
);
},
child: draggableNote,
);
},
);
},
);
},
),
),
],
),
),
);
@@ -904,7 +1008,7 @@ class _CategoryDialogState extends State<_CategoryDialog> {
await widget.onRequestSync();
} catch (_) {}
if (mounted) {
await widget.onCategoryDeleted();
await widget.onCategoryDeleted();
Navigator.pop(context);
}
} catch (e) {