feat: Refactor NoteEditorScreen for improved mobile layout handling and UI consistency
This commit is contained in:
@@ -5,6 +5,7 @@ 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.
|
||||||
@@ -22,7 +23,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 (MediaQuery.sizeOf(context).width < 600) {
|
if (isAndroid || isIOS) {
|
||||||
return showGeneralDialog<dynamic>(
|
return showGeneralDialog<dynamic>(
|
||||||
context: context,
|
context: context,
|
||||||
barrierDismissible: false,
|
barrierDismissible: false,
|
||||||
@@ -81,7 +82,7 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
|
|||||||
late Note _currentNote;
|
late Note _currentNote;
|
||||||
late bool _isNewNote;
|
late bool _isNewNote;
|
||||||
|
|
||||||
bool get _isCompactLayout => MediaQuery.sizeOf(context).width < 600;
|
bool get _isMobileLayout => isAndroid || isIOS;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void initState() {
|
void initState() {
|
||||||
@@ -203,7 +204,7 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
|
|||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
if (_isCompactLayout) {
|
if (_isMobileLayout) {
|
||||||
return Material(
|
return Material(
|
||||||
color: Colors.transparent,
|
color: Colors.transparent,
|
||||||
child: SafeArea(
|
child: SafeArea(
|
||||||
@@ -338,23 +339,17 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
|
|||||||
|
|
||||||
return LayoutBuilder(
|
return LayoutBuilder(
|
||||||
builder: (BuildContext context, BoxConstraints constraints) {
|
builder: (BuildContext context, BoxConstraints constraints) {
|
||||||
final double maxWidth = math.min(600, constraints.maxWidth - 48);
|
final double maxWidth = math.min(constraints.maxWidth - 32, 600);
|
||||||
final double maxHeight = math.min(constraints.maxHeight * 0.88, 720);
|
final double maxHeight = math.min(constraints.maxHeight - 64, 720);
|
||||||
final double overlayTop = MediaQuery.paddingOf(context).top + 32;
|
final double overlayTop = MediaQuery.paddingOf(context).top + 32;
|
||||||
|
|
||||||
return Stack(
|
return Stack(
|
||||||
children: [
|
children: [
|
||||||
Positioned.fill(
|
Positioned.fill(
|
||||||
top: overlayTop,
|
top: overlayTop,
|
||||||
child: IgnorePointer(
|
child: ModalBarrier(
|
||||||
child: Container(
|
dismissible: false,
|
||||||
color: const Color.fromARGB(
|
color: const Color.fromARGB(54, 0, 0, 0).withValues(alpha: 0.5),
|
||||||
54,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
).withValues(alpha: 0.5),
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
Positioned.fill(
|
Positioned.fill(
|
||||||
@@ -425,32 +420,32 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
|
|||||||
),
|
),
|
||||||
),
|
),
|
||||||
Expanded(
|
Expanded(
|
||||||
child: SingleChildScrollView(
|
child: Padding(
|
||||||
child: Padding(
|
padding: const EdgeInsets.all(20),
|
||||||
padding: const EdgeInsets.all(20),
|
child: Column(
|
||||||
child: Column(
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
children: [
|
||||||
children: [
|
TextField(
|
||||||
TextField(
|
controller: _titleController,
|
||||||
controller: _titleController,
|
style: const TextStyle(
|
||||||
style: const TextStyle(
|
color: Colors.white,
|
||||||
color: Colors.white,
|
fontSize: 28,
|
||||||
fontSize: 28,
|
fontWeight: FontWeight.bold,
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
),
|
|
||||||
decoration: const InputDecoration(
|
|
||||||
hintText: 'Título',
|
|
||||||
hintStyle: TextStyle(
|
|
||||||
color: Colors.white30,
|
|
||||||
),
|
|
||||||
border: InputBorder.none,
|
|
||||||
contentPadding: EdgeInsets.zero,
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
const SizedBox(height: 16),
|
decoration: const InputDecoration(
|
||||||
TextField(
|
hintText: 'Título',
|
||||||
|
hintStyle: TextStyle(color: Colors.white30),
|
||||||
|
border: InputBorder.none,
|
||||||
|
contentPadding: EdgeInsets.zero,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: 8),
|
||||||
|
Expanded(
|
||||||
|
child: TextField(
|
||||||
controller: _bodyController,
|
controller: _bodyController,
|
||||||
|
keyboardType: TextInputType.multiline,
|
||||||
maxLines: null,
|
maxLines: null,
|
||||||
|
expands: true,
|
||||||
style: const TextStyle(
|
style: const TextStyle(
|
||||||
color: Colors.white,
|
color: Colors.white,
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
@@ -465,8 +460,8 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
|
|||||||
contentPadding: EdgeInsets.zero,
|
contentPadding: EdgeInsets.zero,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
),
|
||||||
),
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|||||||
Reference in New Issue
Block a user