feat: Refactor NoteEditorScreen for improved layout handling and code readability
This commit is contained in:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user