Marcos/notas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance drag-and-drop functionality with long press support and pointer detection

Browse Source
This commit is contained in:
Marcos
2026-05-18 19:06:34 +02:00
parent efe602a5da
commit 989d307fd6
1 changed files with 310 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/screens/home_screen.dart
+195 -21
View File
@@ -1,5 +1,6 @@
import 'dart:math' as math; import 'dart:math' as math;
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart'; import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
@@ -32,6 +33,13 @@ class _HomeScreenState extends State<HomeScreen> {
bool _isLoading = true; bool _isLoading = true;
bool _isDragging = false; bool _isDragging = false;
bool _isMenuOpen = false; bool _isMenuOpen = false;
PointerDeviceKind _lastPointerKind = PointerDeviceKind.mouse;
bool _requiresLongPressToDrag(PointerDeviceKind kind) {
return kind == PointerDeviceKind.touch ||
kind == PointerDeviceKind.stylus ||
kind == PointerDeviceKind.invertedStylus;
}
@override @override
void initState() { void initState() {
@@ -66,7 +74,10 @@ class _HomeScreenState extends State<HomeScreen> {
if (result is Note) { if (result is Note) {
final Note createdNote = await widget.repository.createNote(result); final Note createdNote = await widget.repository.createNote(result);
final List<Note> updatedNotes = _normalizeNotes(<Note>[createdNote, ..._notes]); final List<Note> updatedNotes = _normalizeNotes(<Note>[
createdNote,
..._notes,
]);
if (!mounted) { if (!mounted) {
return; return;
@@ -127,7 +138,10 @@ class _HomeScreenState extends State<HomeScreen> {
} }
Future<void> _openNoteEditor(Note note) async { Future<void> _openNoteEditor(Note note) async {
final dynamic result = await NoteEditorScreen.showDialog(context, note: note); final dynamic result = await NoteEditorScreen.showDialog(
context,
note: note,
);
if (result == null) { if (result == null) {
return; return;
@@ -174,9 +188,11 @@ class _HomeScreenState extends State<HomeScreen> {
final String query = _searchQuery.toLowerCase(); final String query = _searchQuery.toLowerCase();
return _notes return _notes
.where((Note note) => .where(
(Note note) =>
note.title.toLowerCase().contains(query) || note.title.toLowerCase().contains(query) ||
note.body.toLowerCase().contains(query)) note.body.toLowerCase().contains(query),
)
.toList(); .toList();
} }
@@ -197,7 +213,9 @@ class _HomeScreenState extends State<HomeScreen> {
await _loadNotes(); await _loadNotes();
}, },
child: MouseRegion( child: MouseRegion(
cursor: _isDragging ? SystemMouseCursors.grabbing : SystemMouseCursors.basic, cursor: _isDragging
? SystemMouseCursors.grabbing
: SystemMouseCursors.basic,
child: MasonryGridView.count( child: MasonryGridView.count(
crossAxisCount: crossAxisCount, crossAxisCount: crossAxisCount,
mainAxisSpacing: 10, mainAxisSpacing: 10,
@@ -208,15 +226,137 @@ class _HomeScreenState extends State<HomeScreen> {
return DragTarget<int>( return DragTarget<int>(
onAcceptWithDetails: (DragTargetDetails<int> details) { onAcceptWithDetails: (DragTargetDetails<int> details) {
final Note targetNote = filteredNotes[index]; final Note targetNote = filteredNotes[index];
final int originalTargetIndex = _notes.indexOf(targetNote); final int originalTargetIndex = _notes.indexOf(
targetNote,
);
_reorderNote(details.data, originalTargetIndex); _reorderNote(details.data, originalTargetIndex);
}, },
builder: (context, candidateData, rejectedData) { builder: (context, candidateData, rejectedData) {
return LayoutBuilder( return LayoutBuilder(
builder: (context, constraints) { builder: (context, constraints) {
final double cellWidth = constraints.maxWidth; final double cellWidth = constraints.maxWidth;
final bool requiresLongPressToDrag =
_requiresLongPressToDrag(_lastPointerKind);
return Draggable<int>( 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,
),
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<int>(
filteredNotes[index].id ??
filteredNotes[index].index,
),
note: filteredNotes[index],
onTap: () =>
_openNoteEditor(filteredNotes[index]),
isDragging: _isDragging,
),
),
)
: Draggable<int>(
data: _notes.indexOf(filteredNotes[index]), data: _notes.indexOf(filteredNotes[index]),
onDragStarted: () { onDragStarted: () {
if (!mounted) return; if (!mounted) return;
@@ -256,7 +396,11 @@ class _HomeScreenState extends State<HomeScreen> {
}, },
child: Opacity( child: Opacity(
opacity: 0.95, opacity: 0.95,
child: NoteCard(note: filteredNotes[index], onTap: () {}, isDragging: true), child: NoteCard(
note: filteredNotes[index],
onTap: () {},
isDragging: true,
),
), ),
), ),
), ),
@@ -271,10 +415,14 @@ class _HomeScreenState extends State<HomeScreen> {
decoration: BoxDecoration( decoration: BoxDecoration(
color: const Color.fromRGBO(24, 25, 26, 1), color: const Color.fromRGBO(24, 25, 26, 1),
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.white24, width: 1), border: Border.all(
color: Colors.white24,
width: 1,
),
), ),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Text( Text(
@@ -290,7 +438,10 @@ class _HomeScreenState extends State<HomeScreen> {
const SizedBox(height: 8), const SizedBox(height: 8),
Text( Text(
filteredNotes[index].body, filteredNotes[index].body,
style: const TextStyle(color: Colors.white70, fontSize: 14), style: const TextStyle(
color: Colors.white70,
fontSize: 14,
),
maxLines: 20, maxLines: 20,
overflow: TextOverflow.clip, overflow: TextOverflow.clip,
), ),
@@ -302,18 +453,38 @@ class _HomeScreenState extends State<HomeScreen> {
child: Container( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
border: candidateData.isNotEmpty border: candidateData.isNotEmpty
? Border.all(color: Colors.blue.shade400, width: 2) ? Border.all(
color: Colors.blue.shade400,
width: 2,
)
: null, : null,
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(12),
), ),
child: NoteCard( child: NoteCard(
key: ValueKey<int>(filteredNotes[index].id ?? filteredNotes[index].index), key: ValueKey<int>(
filteredNotes[index].id ??
filteredNotes[index].index,
),
note: filteredNotes[index], note: filteredNotes[index],
onTap: () => _openNoteEditor(filteredNotes[index]), onTap: () =>
_openNoteEditor(filteredNotes[index]),
isDragging: _isDragging, isDragging: _isDragging,
), ),
), ),
); );
return Listener(
onPointerDown: (PointerDownEvent event) {
if (_lastPointerKind == event.kind) {
return;
}
setState(() {
_lastPointerKind = event.kind;
});
},
child: draggableNote,
);
}, },
); );
}, },
@@ -327,11 +498,7 @@ class _HomeScreenState extends State<HomeScreen> {
body: Container( body: Container(
decoration: const BoxDecoration( decoration: const BoxDecoration(
gradient: LinearGradient( gradient: LinearGradient(
colors: [ colors: [Color(0xFF191A1D), Color(0xFF222326), Color(0xFF101114)],
Color(0xFF191A1D),
Color(0xFF222326),
Color(0xFF101114),
],
begin: Alignment.topLeft, begin: Alignment.topLeft,
end: Alignment.bottomRight, end: Alignment.bottomRight,
), ),
@@ -355,7 +522,10 @@ class _HomeScreenState extends State<HomeScreen> {
child: Stack( child: Stack(
children: [ children: [
Padding( Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0), padding: const EdgeInsets.symmetric(
horizontal: 12.0,
vertical: 8.0,
),
child: body, child: body,
), ),
Positioned.fill( Positioned.fill(
@@ -431,7 +601,11 @@ class _EmptyState extends StatelessWidget {
SizedBox(height: 12), SizedBox(height: 12),
Text( Text(
'Aún no hay notas', 'Aún no hay notas',
style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.w600), style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w600,
),
), ),
SizedBox(height: 8), SizedBox(height: 8),
Text( Text(