feat: Refactor NoteEditorScreen for improved layout handling and code readability

This commit is contained in:
2026-05-19 17:28:26 +02:00
parent 48cd1b2403
commit c6994b9355
+67 -21
View File
@@ -5,7 +5,6 @@ import 'package:flutter/material.dart';
import 'package:intl/intl.dart'; import 'package:intl/intl.dart';
import 'package:notas/models/note.dart'; import 'package:notas/models/note.dart';
import 'package:notas/platform/app_platform.dart';
// NoteEditorScreen: unified UI for creating and editing notes. // NoteEditorScreen: unified UI for creating and editing notes.
// - Use `NoteEditorScreen.showDialog(context, note: existing)` to edit. // - Use `NoteEditorScreen.showDialog(context, note: existing)` to edit.
@@ -23,7 +22,7 @@ class NoteEditorScreen extends StatefulWidget {
State<NoteEditorScreen> createState() => _NoteEditorScreenState(); State<NoteEditorScreen> createState() => _NoteEditorScreenState();
static Future<dynamic> showDialog(BuildContext context, {Note? note}) { static Future<dynamic> showDialog(BuildContext context, {Note? note}) {
if (isAndroid || isIOS) { if (MediaQuery.sizeOf(context).width < 600) {
return showGeneralDialog<dynamic>( return showGeneralDialog<dynamic>(
context: context, context: context,
barrierDismissible: false, barrierDismissible: false,
@@ -82,7 +81,7 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
late Note _currentNote; late Note _currentNote;
late bool _isNewNote; late bool _isNewNote;
bool get _isMobilePlatform => isAndroid || isIOS; bool get _isCompactLayout => MediaQuery.sizeOf(context).width < 600;
@override @override
void initState() { void initState() {
@@ -204,7 +203,7 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
if (_isMobilePlatform) { if (_isCompactLayout) {
return Material( return Material(
color: Colors.transparent, color: Colors.transparent,
child: SafeArea( child: SafeArea(
@@ -213,7 +212,10 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
child: Column( child: Column(
children: [ children: [
Container( Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12), padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 12,
),
decoration: BoxDecoration( decoration: BoxDecoration(
border: Border( border: Border(
bottom: BorderSide(color: Colors.white12, width: 1), bottom: BorderSide(color: Colors.white12, width: 1),
@@ -234,12 +236,19 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
children: [ children: [
Text( Text(
'Creado: ${_formatDate(_currentNote.createdAt)}', 'Creado: ${_formatDate(_currentNote.createdAt)}',
style: const TextStyle(color: Colors.white54, fontSize: 12), style: const TextStyle(
color: Colors.white54,
fontSize: 12,
),
), ),
if (_currentNote.updatedAt != _currentNote.createdAt) if (_currentNote.updatedAt !=
_currentNote.createdAt)
Text( Text(
'Modificado: ${_formatDate(_currentNote.updatedAt)}', 'Modificado: ${_formatDate(_currentNote.updatedAt)}',
style: const TextStyle(color: Colors.white54, fontSize: 12), style: const TextStyle(
color: Colors.white54,
fontSize: 12,
),
), ),
], ],
), ),
@@ -290,7 +299,10 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
), ),
), ),
Container( Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12), padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 12,
),
decoration: BoxDecoration( decoration: BoxDecoration(
border: Border( border: Border(
top: BorderSide(color: Colors.white12, width: 1), top: BorderSide(color: Colors.white12, width: 1),
@@ -302,7 +314,10 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
if (!_isNewNote) if (!_isNewNote)
IconButton( IconButton(
onPressed: _deleteNote, onPressed: _deleteNote,
icon: const Icon(Icons.delete_outline, color: Colors.red), icon: const Icon(
Icons.delete_outline,
color: Colors.red,
),
tooltip: 'Eliminar nota', tooltip: 'Eliminar nota',
) )
else else
@@ -333,7 +348,12 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
top: overlayTop, top: overlayTop,
child: IgnorePointer( child: IgnorePointer(
child: Container( child: Container(
color: const Color.fromARGB(54, 0, 0, 0).withValues(alpha: 0.5), color: const Color.fromARGB(
54,
0,
0,
0,
).withValues(alpha: 0.5),
), ),
), ),
), ),
@@ -354,17 +374,26 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Container( Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12), padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 12,
),
decoration: BoxDecoration( decoration: BoxDecoration(
border: Border( border: Border(
bottom: BorderSide(color: Colors.white12, width: 1), bottom: BorderSide(
color: Colors.white12,
width: 1,
),
), ),
), ),
child: Row( child: Row(
children: [ children: [
IconButton( IconButton(
onPressed: _closeWithoutSaving, onPressed: _closeWithoutSaving,
icon: const Icon(Icons.close, color: Colors.white70), icon: const Icon(
Icons.close,
color: Colors.white70,
),
tooltip: 'Cerrar sin guardar', tooltip: 'Cerrar sin guardar',
), ),
const SizedBox(width: 8), const SizedBox(width: 8),
@@ -375,12 +404,19 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
children: [ children: [
Text( Text(
'Creado: ${_formatDate(_currentNote.createdAt)}', 'Creado: ${_formatDate(_currentNote.createdAt)}',
style: const TextStyle(color: Colors.white54, fontSize: 12), style: const TextStyle(
color: Colors.white54,
fontSize: 12,
),
), ),
if (_currentNote.updatedAt != _currentNote.createdAt) if (_currentNote.updatedAt !=
_currentNote.createdAt)
Text( Text(
'Modificado: ${_formatDate(_currentNote.updatedAt)}', 'Modificado: ${_formatDate(_currentNote.updatedAt)}',
style: const TextStyle(color: Colors.white54, fontSize: 12), style: const TextStyle(
color: Colors.white54,
fontSize: 12,
),
), ),
], ],
), ),
@@ -404,7 +440,9 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
), ),
decoration: const InputDecoration( decoration: const InputDecoration(
hintText: 'Título', hintText: 'Título',
hintStyle: TextStyle(color: Colors.white30), hintStyle: TextStyle(
color: Colors.white30,
),
border: InputBorder.none, border: InputBorder.none,
contentPadding: EdgeInsets.zero, contentPadding: EdgeInsets.zero,
), ),
@@ -420,7 +458,9 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
), ),
decoration: const InputDecoration( decoration: const InputDecoration(
hintText: 'Escribe tu nota...', hintText: 'Escribe tu nota...',
hintStyle: TextStyle(color: Colors.white30), hintStyle: TextStyle(
color: Colors.white30,
),
border: InputBorder.none, border: InputBorder.none,
contentPadding: EdgeInsets.zero, contentPadding: EdgeInsets.zero,
), ),
@@ -431,7 +471,10 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
), ),
), ),
Container( Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12), padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 12,
),
decoration: BoxDecoration( decoration: BoxDecoration(
border: Border( border: Border(
top: BorderSide(color: Colors.white12, width: 1), top: BorderSide(color: Colors.white12, width: 1),
@@ -443,7 +486,10 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
if (!_isNewNote) if (!_isNewNote)
IconButton( IconButton(
onPressed: _deleteNote, onPressed: _deleteNote,
icon: const Icon(Icons.delete_outline, color: Colors.red), icon: const Icon(
Icons.delete_outline,
color: Colors.red,
),
tooltip: 'Eliminar nota', tooltip: 'Eliminar nota',
) )
else else