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

feat: Introduce category selection functionality in NoteEditorScreen and related components

Browse Source
This commit is contained in:
Marcos
2026-05-21 19:31:29 +02:00
parent 7e210871dd
commit 8be7819528
7 changed files with 421 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/models/note.dart
+8 -2
View File
@@ -1,5 +1,7 @@
import 'package:uuid/uuid.dart';
const Object _unsetCategoryId = Object();
// Model: Note
// - Representa una nota guardada en la app.
class Note {
@@ -36,12 +38,16 @@ class Note {
DateTime? createdAt,
DateTime? updatedAt,
double? position,
String? categoryId,
Object? categoryId = _unsetCategoryId,
int? serverVersion,
bool? isDeleted,
bool? isPermanentlyDeleted,
bool? isDirty,
}) {
final String? resolvedCategoryId = identical(categoryId, _unsetCategoryId)
? this.categoryId
: categoryId as String?;
return Note(
id: id ?? this.id,
title: title ?? this.title,
@@ -49,7 +55,7 @@ class Note {
createdAt: createdAt ?? this.createdAt,
updatedAt: updatedAt ?? this.updatedAt,
position: position ?? this.position,
categoryId: categoryId ?? this.categoryId,
categoryId: resolvedCategoryId,
serverVersion: serverVersion ?? this.serverVersion,
isDeleted: isDeleted ?? this.isDeleted,
isPermanentlyDeleted: isPermanentlyDeleted ?? this.isPermanentlyDeleted,
lib/screens/home_screen.dart
+7 -26
View File
@@ -9,6 +9,7 @@ import 'package:notas/models/note.dart';
import 'package:notas/screens/note_editor_screen.dart';
import 'package:notas/models/category.dart';
import 'package:notas/widgets/menu_drawer.dart';
import 'package:notas/widgets/category_style.dart';
import 'package:notas/widgets/note_card.dart';
import 'package:notas/widgets/search_app_bar.dart';
import 'package:notas/widgets/sync_status.dart';
@@ -148,6 +149,7 @@ class _HomeScreenState extends State<HomeScreen> {
final dynamic result = await NoteEditorScreen.showDialog(
context,
categoryId: _showDeletedNotes ? null : _selectedCategoryId,
categories: _categories,
);
if (result == null) {
@@ -199,6 +201,7 @@ class _HomeScreenState extends State<HomeScreen> {
final dynamic result = await NoteEditorScreen.showDialog(
context,
note: note,
categories: _categories,
);
if (result == null) {
@@ -786,28 +789,6 @@ class _CategoryDialogState extends State<_CategoryDialog> {
IconData? _selectedIcon;
int _selectedSection = 0;
final List<Color> _palette = [
Colors.amber,
Colors.blue,
Colors.green,
Colors.purple,
Colors.red,
Colors.teal,
Colors.orange,
Colors.grey,
];
final List<IconData> _icons = [
Icons.folder,
Icons.work,
Icons.star,
Icons.home,
Icons.school,
Icons.book,
Icons.music_note,
Icons.lightbulb,
];
@override
void initState() {
super.initState();
@@ -817,9 +798,9 @@ class _CategoryDialogState extends State<_CategoryDialog> {
? Color(widget.category!.colorValue!)
: null;
if (widget.category != null && widget.category!.iconCodePoint != null) {
_selectedIcon = _icons.firstWhere(
_selectedIcon = CategoryStyle.icons.firstWhere(
(IconData icon) => icon.codePoint == widget.category!.iconCodePoint,
orElse: () => _icons.first,
orElse: () => CategoryStyle.icons.first,
);
}
}
@@ -977,7 +958,7 @@ class _CategoryDialogState extends State<_CategoryDialog> {
key: const ValueKey<String>('colors'),
spacing: 10,
runSpacing: 10,
children: _palette.map((Color color) {
children: CategoryStyle.colors.map((Color color) {
final bool isSelected =
_selectedColor?.value == color.value;
return GestureDetector(
@@ -1009,7 +990,7 @@ class _CategoryDialogState extends State<_CategoryDialog> {
key: const ValueKey<String>('icons'),
spacing: 10,
runSpacing: 10,
children: _icons.map((IconData icon) {
children: CategoryStyle.icons.map((IconData icon) {
final bool isSelected = _selectedIcon == icon;
return GestureDetector(
onTap: () => setState(() {
lib/screens/note_editor_screen.dart
+258 -2
View File
@@ -4,8 +4,10 @@ import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:notas/models/category.dart';
import 'package:notas/models/note.dart';
import 'package:notas/platform/app_platform.dart';
import 'package:notas/widgets/category_style.dart';
// NoteEditorScreen: unified UI for creating and editing notes.
// - Use `NoteEditorScreen.showDialog(context, note: existing)` to edit.
@@ -18,11 +20,13 @@ class NoteEditorScreen extends StatefulWidget {
super.key,
required this.note,
this.categoryId,
this.categories = const <Category>[],
this.onComplete,
});
final Note? note;
final String? categoryId;
final List<Category> categories;
final ValueChanged<dynamic>? onComplete;
@override
@@ -32,6 +36,7 @@ class NoteEditorScreen extends StatefulWidget {
BuildContext context, {
Note? note,
String? categoryId,
List<Category> categories = const <Category>[],
}) {
return showGeneralDialog<dynamic>(
context: context,
@@ -39,7 +44,11 @@ class NoteEditorScreen extends StatefulWidget {
barrierColor: Colors.transparent,
transitionDuration: const Duration(milliseconds: 200),
pageBuilder: (context, animation, secondaryAnimation) {
return NoteEditorScreen(note: note, categoryId: categoryId);
return NoteEditorScreen(
note: note,
categoryId: categoryId,
categories: categories,
);
},
transitionBuilder: (context, animation, secondaryAnimation, child) {
return ScaleTransition(scale: animation, child: child);
@@ -51,12 +60,14 @@ class NoteEditorScreen extends StatefulWidget {
BuildContext context, {
Note? note,
String? categoryId,
List<Category> categories = const <Category>[],
}) {
if (isAndroid || isIOS) {
return _showGeneralEditorDialog(
context,
note: note,
categoryId: categoryId,
categories: categories,
);
}
@@ -66,6 +77,7 @@ class NoteEditorScreen extends StatefulWidget {
context,
note: note,
categoryId: categoryId,
categories: categories,
);
}
@@ -77,6 +89,7 @@ class NoteEditorScreen extends StatefulWidget {
return NoteEditorScreen(
note: note,
categoryId: categoryId,
categories: categories,
onComplete: (dynamic result) {
if (!completer.isCompleted) {
completer.complete(result);
@@ -99,6 +112,10 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
late TextEditingController _bodyController;
late Note _currentNote;
late bool _isNewNote;
String? _selectedCategoryId;
final GlobalKey _categorySelectorKey = GlobalKey();
OverlayEntry? _categoryMenuEntry;
bool _didComplete = false;
bool get _isMobileLayout => isAndroid || isIOS;
@@ -121,18 +138,28 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
_currentNote = widget.note!;
}
_selectedCategoryId = _currentNote.categoryId ?? widget.categoryId;
_titleController = TextEditingController(text: _currentNote.title);
_bodyController = TextEditingController(text: _currentNote.body);
}
@override
void dispose() {
_closeCategoryMenu();
_titleController.dispose();
_bodyController.dispose();
super.dispose();
}
void _complete(dynamic result) {
if (_didComplete) {
return;
}
_didComplete = true;
_closeCategoryMenu();
final ValueChanged<dynamic>? callback = widget.onComplete;
if (callback != null) {
@@ -150,8 +177,9 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
void _saveNote() {
final String title = _titleController.text.trim();
final String body = _bodyController.text.trim();
final bool categoryChanged = _selectedCategoryId != _currentNote.categoryId;
if (title.isEmpty && body.isEmpty) {
if (title.isEmpty && body.isEmpty && !categoryChanged) {
_complete(null);
return;
}
@@ -159,6 +187,7 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
final Note updatedNote = _currentNote.copyWith(
title: title.isEmpty ? 'Sin título' : title,
body: body,
categoryId: _selectedCategoryId,
updatedAt: DateTime.now(),
isDirty: true,
);
@@ -278,6 +307,217 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
return completer.future;
}
Category? _categoryById(String? id) {
for (final Category category in widget.categories) {
if (category.id == id) {
return category;
}
}
return null;
}
Color _categoryBackgroundColor(Category? category) {
if (category?.colorValue == null) {
return Colors.white.withValues(alpha: 0.08);
}
return Color(category!.colorValue!);
}
Color _categoryForegroundColor(Category? category) {
if (category == null || category.colorValue == null) {
return Colors.white;
}
final Color background = Color(category.colorValue!);
return background.computeLuminance() > 0.55 ? Colors.black87 : Colors.white;
}
Widget _buildCategorySelectorBox({Category? category}) {
final String label = category?.name ?? 'Sin categoría';
final IconData icon = CategoryStyle.iconForCodePoint(category?.iconCodePoint);
final Color backgroundColor = _categoryBackgroundColor(category);
final Color foregroundColor = _categoryForegroundColor(category);
return Container(
key: _categorySelectorKey,
padding: const EdgeInsets.symmetric(horizontal: 9, vertical: 6),
decoration: BoxDecoration(
color: backgroundColor,
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: category?.colorValue != null
? backgroundColor.withValues(alpha: 0.85)
: Colors.white24,
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, color: foregroundColor, size: 15),
const SizedBox(width: 6),
Expanded(
child: Text(
label,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: foregroundColor,
fontSize: 12,
fontWeight: FontWeight.w600,
),
),
),
const SizedBox(width: 6),
Icon(
Icons.arrow_drop_down,
color: foregroundColor.withValues(alpha: 0.9),
size: 16,
),
],
),
);
}
void _closeCategoryMenu() {
final OverlayEntry? entry = _categoryMenuEntry;
if (entry != null && entry.mounted) {
entry.remove();
}
_categoryMenuEntry = null;
}
void _toggleCategoryMenu() {
if (_categoryMenuEntry != null) {
_closeCategoryMenu();
return;
}
final OverlayState? overlayState = Overlay.of(context, rootOverlay: true);
if (overlayState == null) {
return;
}
_categoryMenuEntry = OverlayEntry(
builder: (BuildContext overlayContext) {
final Size screenSize = MediaQuery.of(overlayContext).size;
final double menuWidth = math.min(screenSize.width - 32, 320);
final double menuHeight = math.min(screenSize.height - 32, 360);
return Material(
color: Colors.transparent,
child: Stack(
children: [
Positioned.fill(
child: GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: _closeCategoryMenu,
child: const SizedBox.expand(),
),
),
Center(
child: ConstrainedBox(
constraints: BoxConstraints(
maxWidth: menuWidth,
maxHeight: menuHeight,
),
child: Material(
elevation: 10,
color: const Color(0xFF303134),
borderRadius: BorderRadius.circular(12),
clipBehavior: Clip.antiAlias,
child: ListView(
padding: const EdgeInsets.symmetric(vertical: 8),
shrinkWrap: true,
children: [
_buildCategoryMenuItem(
category: null,
label: 'Sin categoría',
isSelected: _selectedCategoryId == null,
onTap: () {
setState(() {
_selectedCategoryId = null;
});
_closeCategoryMenu();
},
),
for (final Category category in widget.categories)
_buildCategoryMenuItem(
category: category,
label: category.name,
isSelected: _selectedCategoryId == category.id,
onTap: () {
setState(() {
_selectedCategoryId = category.id;
});
_closeCategoryMenu();
},
),
],
),
),
),
),
],
),
);
},
);
overlayState.insert(_categoryMenuEntry!);
}
Widget _buildCategoryMenuItem({
required Category? category,
required String label,
required bool isSelected,
required VoidCallback onTap,
}) {
final Color backgroundColor = _categoryBackgroundColor(category);
final Color foregroundColor = _categoryForegroundColor(category);
final IconData icon = CategoryStyle.iconForCodePoint(category?.iconCodePoint);
return InkWell(
onTap: onTap,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
color: isSelected ? Colors.white.withValues(alpha: 0.08) : null,
child: Row(
children: [
Container(
width: 28,
height: 28,
decoration: BoxDecoration(
color: backgroundColor,
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: category?.colorValue != null
? backgroundColor.withValues(alpha: 0.85)
: Colors.white24,
),
),
child: Icon(icon, size: 16, color: foregroundColor),
),
const SizedBox(width: 12),
Expanded(
child: Text(
label,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: foregroundColor,
fontSize: 13,
fontWeight: FontWeight.w600,
),
),
),
if (isSelected)
Icon(Icons.check, color: foregroundColor, size: 18),
],
),
),
);
}
Future<void> _deleteNote() async {
final bool confirmed = await _showDeleteConfirmation();
if (!mounted || !confirmed) {
@@ -343,6 +583,22 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
],
),
),
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 150),
child: SizedBox(
width: 150,
child: KeyedSubtree(
key: const ValueKey<String>('category_selector'),
child: InkWell(
onTap: _toggleCategoryMenu,
borderRadius: BorderRadius.circular(12),
child: _buildCategorySelectorBox(
category: _categoryById(_selectedCategoryId),
),
),
),
),
),
],
),
),
lib/widgets/category_style.dart
+41
View File
@@ -0,0 +1,41 @@
import 'package:flutter/material.dart';
class CategoryStyle {
CategoryStyle._();
static const List<Color> colors = <Color>[
Colors.amber,
Colors.blue,
Colors.green,
Colors.purple,
Colors.red,
Colors.teal,
Colors.orange,
Colors.grey,
];
static const List<IconData> icons = <IconData>[
Icons.folder,
Icons.work,
Icons.star,
Icons.home,
Icons.school,
Icons.book,
Icons.music_note,
Icons.lightbulb,
];
static IconData iconForCodePoint(int? codePoint) {
if (codePoint == null) {
return Icons.folder_outlined;
}
for (final IconData icon in icons) {
if (icon.codePoint == codePoint) {
return icon;
}
}
return Icons.folder_outlined;
}
}
lib/widgets/menu_drawer.dart
+5 -28
View File
@@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'package:notas/models/category.dart';
import 'package:notas/widgets/category_style.dart';
class MenuDrawer extends StatelessWidget {
const MenuDrawer({
@@ -45,9 +46,10 @@ class MenuDrawer extends StatelessWidget {
child: Column(
children: categories.map((category) {
final categoryId = 'category_${category.id}';
final IconData categoryIcon = _iconForCodePoint(
category.iconCodePoint,
);
final IconData categoryIcon =
CategoryStyle.iconForCodePoint(
category.iconCodePoint,
);
return _MenuItemTile(
icon: categoryIcon,
@@ -105,31 +107,6 @@ class MenuDrawer extends StatelessWidget {
}
}
IconData _iconForCodePoint(int? codePoint) {
if (codePoint == null) {
return Icons.folder_outlined;
}
const List<IconData> icons = [
Icons.folder,
Icons.work,
Icons.star,
Icons.home,
Icons.school,
Icons.book,
Icons.music_note,
Icons.lightbulb,
];
for (final IconData icon in icons) {
if (icon.codePoint == codePoint) {
return icon;
}
}
return Icons.folder_outlined;
}
class _MenuItemTile extends StatefulWidget {
const _MenuItemTile({
required this.icon,
test/note_editor_screen_test.dart
+81
View File
@@ -0,0 +1,81 @@
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:notas/models/category.dart';
import 'package:notas/models/note.dart';
import 'package:notas/screens/note_editor_screen.dart';
void main() {
testWidgets('saves a note when only the category changes', (
WidgetTester tester,
) async {
Note? savedNote;
await tester.pumpWidget(
MaterialApp(
home: Scaffold(
body: NoteEditorScreen(
note: null,
categoryId: null,
categories: <Category>[
Category(
id: 'work',
name: 'Trabajo',
updatedAt: DateTime(2026, 5, 21),
),
],
onComplete: (dynamic result) {
savedNote = result as Note?;
},
),
),
),
);
expect(find.text('Sin categoría'), findsWidgets);
await tester.tap(find.byKey(const ValueKey<String>('category_selector')));
await tester.pumpAndSettle();
await tester.tap(find.text('Trabajo').last);
await tester.pumpAndSettle();
await tester.tap(find.text('Guardar'));
await tester.pumpAndSettle();
expect(savedNote, isNotNull);
expect(savedNote!.categoryId, 'work');
expect(savedNote!.title, 'Sin título');
});
testWidgets('only completes once when save is tapped twice', (
WidgetTester tester,
) async {
int completionCount = 0;
await tester.pumpWidget(
MaterialApp(
home: Scaffold(
body: NoteEditorScreen(
note: null,
categoryId: null,
categories: <Category>[],
onComplete: (dynamic result) {
if (result is Note) {
completionCount += 1;
}
},
),
),
),
);
await tester.enterText(find.byType(TextField).first, 'Nota de prueba');
await tester.tap(find.text('Guardar'));
await tester.tap(find.text('Guardar'));
await tester.pumpAndSettle();
expect(completionCount, 1);
});
}
test/note_test.dart
+21
View File
@@ -0,0 +1,21 @@
import 'package:flutter_test/flutter_test.dart';
import 'package:notas/models/note.dart';
void main() {
test('copyWith can clear categoryId explicitly', () {
final Note note = Note(
title: 'A',
body: 'B',
createdAt: DateTime(2026, 5, 21),
updatedAt: DateTime(2026, 5, 21),
position: 0,
categoryId: 'cat-1',
);
final Note cleared = note.copyWith(categoryId: null);
expect(cleared.categoryId, isNull);
expect(cleared.id, note.id);
});
}