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:notas/models/note.dart';
import 'package:notas/platform/app_platform.dart';
// NoteEditorScreen: unified UI for creating and editing notes.
// - Use `NoteEditorScreen.showDialog(context, note: existing)` to edit.
@@ -23,7 +22,7 @@ class NoteEditorScreen extends StatefulWidget {
State<NoteEditorScreen> createState() => _NoteEditorScreenState();
static Future<dynamic> showDialog(BuildContext context, {Note? note}) {
if (isAndroid || isIOS) {
if (MediaQuery.sizeOf(context).width < 600) {
return showGeneralDialog<dynamic>(
context: context,
barrierDismissible: false,
@@ -82,7 +81,7 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
late Note _currentNote;
late bool _isNewNote;
bool get _isMobilePlatform => isAndroid || isIOS;
bool get _isCompactLayout => MediaQuery.sizeOf(context).width < 600;
@override
void initState() {
@@ -204,7 +203,7 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
@override
Widget build(BuildContext context) {
if (_isMobilePlatform) {
if (_isCompactLayout) {
return Material(
color: Colors.transparent,
child: SafeArea(
@@ -213,7 +212,10 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
child: Column(
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 12,
),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.white12, width: 1),
@@ -234,12 +236,19 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
children: [
Text(
'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(
'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(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 12,
),
decoration: BoxDecoration(
border: Border(
top: BorderSide(color: Colors.white12, width: 1),
@@ -302,7 +314,10 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
if (!_isNewNote)
IconButton(
onPressed: _deleteNote,
icon: const Icon(Icons.delete_outline, color: Colors.red),
icon: const Icon(
Icons.delete_outline,
color: Colors.red,
),
tooltip: 'Eliminar nota',
)
else
@@ -333,7 +348,12 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
top: overlayTop,
child: IgnorePointer(
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,
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 12,
),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.white12, width: 1),
bottom: BorderSide(
color: Colors.white12,
width: 1,
),
),
),
child: Row(
children: [
IconButton(
onPressed: _closeWithoutSaving,
icon: const Icon(Icons.close, color: Colors.white70),
icon: const Icon(
Icons.close,
color: Colors.white70,
),
tooltip: 'Cerrar sin guardar',
),
const SizedBox(width: 8),
@@ -375,12 +404,19 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
children: [
Text(
'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(
'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(
hintText: 'Título',
hintStyle: TextStyle(color: Colors.white30),
hintStyle: TextStyle(
color: Colors.white30,
),
border: InputBorder.none,
contentPadding: EdgeInsets.zero,
),
@@ -420,7 +458,9 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
),
decoration: const InputDecoration(
hintText: 'Escribe tu nota...',
hintStyle: TextStyle(color: Colors.white30),
hintStyle: TextStyle(
color: Colors.white30,
),
border: InputBorder.none,
contentPadding: EdgeInsets.zero,
),
@@ -431,7 +471,10 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 12,
),
decoration: BoxDecoration(
border: Border(
top: BorderSide(color: Colors.white12, width: 1),
@@ -443,7 +486,10 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
if (!_isNewNote)
IconButton(
onPressed: _deleteNote,
icon: const Icon(Icons.delete_outline, color: Colors.red),
icon: const Icon(
Icons.delete_outline,
color: Colors.red,
),
tooltip: 'Eliminar nota',
)
else