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/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),
),
),
),
),
),
],
),
),