Marcos/notas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add theme customization options in settings screen and update app theme logic

Browse Source
This commit is contained in:
Marcos
2026-05-18 21:23:55 +02:00
parent beadf860e2
commit e80ae52c08
3 changed files with 168 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/app.dart
+36 -3
View File
@@ -19,6 +19,7 @@ import 'package:notas/widgets/app_title_bar.dart';
import 'package:notas/widgets/sync_status_indicator.dart';
import 'package:path/path.dart' as p;
import 'package:path_provider/path_provider.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:window_manager/window_manager.dart';
enum _AppSection {
@@ -50,6 +51,7 @@ class _NotesAppState extends State<NotesApp>
static const Duration _screenTransitionDuration = Duration(milliseconds: 280);
static const Duration _biometricInactivityTimeout = Duration(minutes: 5);
static const Duration _syncInterval = Duration(minutes: 5);
static const String _themeSeedColorKey = 'theme_seed_color_v1';
final LocalVaultService _vaultService = LocalVaultService.instance;
final GlobalKey<ScaffoldMessengerState> _scaffoldMessengerKey =
@@ -71,6 +73,7 @@ class _NotesAppState extends State<NotesApp>
SyncStatus _syncStatus = SyncStatus.idle;
String? _syncErrorMessage;
int _homeRefreshToken = 0;
Color _themeSeedColor = Colors.amber;
@override
void initState() {
@@ -80,6 +83,7 @@ class _NotesAppState extends State<NotesApp>
windowManager.addListener(this);
windowManager.setPreventClose(true);
}
_loadThemeSeedColor();
_bootstrapVault();
}
@@ -96,6 +100,33 @@ class _NotesAppState extends State<NotesApp>
super.dispose();
}
Future<void> _loadThemeSeedColor() async {
final SharedPreferences prefs = await SharedPreferences.getInstance();
final int? storedColorValue = prefs.getInt(_themeSeedColorKey);
if (storedColorValue == null || !mounted) {
return;
}
setState(() {
_themeSeedColor = Color(storedColorValue);
});
}
Future<void> _setThemeSeedColor(Color color) async {
final SharedPreferences prefs = await SharedPreferences.getInstance();
await prefs.setInt(_themeSeedColorKey, color.value);
if (!mounted) {
return;
}
setState(() {
_themeSeedColor = color;
});
}
ThemeData get _theme => AppTheme.theme(seedColor: _themeSeedColor);
@override
void didChangeAppLifecycleState(AppLifecycleState state) {
if (_isUnlocking) {
@@ -669,7 +700,7 @@ class _NotesAppState extends State<NotesApp>
navigatorKey: _navigatorKey,
title: 'Mis Notas',
debugShowCheckedModeBanner: false,
theme: AppTheme.theme,
theme: _theme,
home: const Scaffold(
body: SafeArea(
child: Column(
@@ -700,7 +731,7 @@ class _NotesAppState extends State<NotesApp>
title: 'Mis Notas',
debugShowCheckedModeBanner: false,
scaffoldMessengerKey: _scaffoldMessengerKey,
theme: AppTheme.theme,
theme: _theme,
home: home,
);
}
@@ -722,6 +753,8 @@ class _NotesAppState extends State<NotesApp>
onDeleteAllData: _resetLocalVaultData,
onBackToHome: _openHome,
onForceSync: () => _performSync(forceFull: true),
currentSeedColor: _themeSeedColor,
onThemeColorSelected: _setThemeSeedColor,
);
return MaterialApp(
@@ -729,7 +762,7 @@ class _NotesAppState extends State<NotesApp>
title: 'Mis Notas',
debugShowCheckedModeBanner: false,
scaffoldMessengerKey: _scaffoldMessengerKey,
theme: AppTheme.theme,
theme: _theme,
home: Shortcuts(
shortcuts: <LogicalKeySet, Intent>{
LogicalKeySet(LogicalKeyboardKey.f5): const PerformSyncIntent(),
lib/screens/settings_screen.dart
+122 -5
View File
@@ -9,11 +9,15 @@ class SettingsScreen extends StatefulWidget {
required this.onDeleteAllData,
required this.onBackToHome,
required this.onForceSync,
required this.currentSeedColor,
required this.onThemeColorSelected,
});
final Future<void> Function() onDeleteAllData;
final VoidCallback onBackToHome;
final Future<void> Function() onForceSync;
final Color currentSeedColor;
final Future<void> Function(Color color) onThemeColorSelected;
@override
State<SettingsScreen> createState() => _SettingsScreenState();
@@ -22,11 +26,22 @@ class SettingsScreen extends StatefulWidget {
class _SettingsScreenState extends State<SettingsScreen> {
bool _isBusy = false;
bool _isSyncing = false;
bool _isThemeSaving = false;
final TextEditingController _endpointController = TextEditingController();
final TextEditingController _encryptionKeyController = TextEditingController();
bool _endpointLoading = true;
bool _encryptionKeyLoading = false;
bool _encryptionKeyVisible = false;
late Color _selectedSeedColor;
static const List<Color> _themeColorOptions = <Color>[
Colors.amber,
Colors.blue,
Colors.teal,
Colors.green,
Colors.pink,
Colors.purple,
];
Future<void> _confirmAndDeleteAll() async {
final bool? confirmed = await showDialog<bool>(
@@ -100,12 +115,56 @@ class _SettingsScreenState extends State<SettingsScreen> {
}
}
Future<void> _selectThemeColor(Color color) async {
if (_isThemeSaving || _selectedSeedColor == color) {
return;
}
final Color previousColor = _selectedSeedColor;
setState(() {
_selectedSeedColor = color;
_isThemeSaving = true;
});
try {
await widget.onThemeColorSelected(color);
} catch (error) {
if (!mounted) {
return;
}
setState(() {
_selectedSeedColor = previousColor;
});
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('No se pudo guardar el color: $error')),
);
} finally {
if (mounted) {
setState(() {
_isThemeSaving = false;
});
}
}
}
@override
void initState() {
super.initState();
_selectedSeedColor = widget.currentSeedColor;
_loadEndpoint();
}
@override
void didUpdateWidget(covariant SettingsScreen oldWidget) {
super.didUpdateWidget(oldWidget);
if (oldWidget.currentSeedColor != widget.currentSeedColor &&
widget.currentSeedColor != _selectedSeedColor) {
_selectedSeedColor = widget.currentSeedColor;
}
}
Future<void> _loadEndpoint() async {
final String endpoint = await ApiConfig.getEndpoint();
if (!mounted) return;
@@ -160,6 +219,58 @@ class _SettingsScreenState extends State<SettingsScreen> {
});
}
Widget _buildThemeColorButton(Color color) {
final bool isSelected = _selectedSeedColor.value == color.value;
final Color foregroundColor =
ThemeData.estimateBrightnessForColor(color) == Brightness.dark
? Colors.white
: Colors.black;
return Semantics(
button: true,
selected: isSelected,
label: 'Color ${color.value.toRadixString(16)}',
child: Tooltip(
message: isSelected ? 'Color actual' : 'Usar este color',
child: InkWell(
onTap: _isThemeSaving ? null : () => _selectThemeColor(color),
borderRadius: BorderRadius.circular(12),
child: AnimatedContainer(
duration: const Duration(milliseconds: 180),
width: 44,
height: 44,
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: isSelected ? Colors.white : Colors.white24,
width: isSelected ? 2.5 : 1.2,
),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.25),
blurRadius: 8,
offset: const Offset(0, 3),
),
],
),
child: Stack(
alignment: Alignment.center,
children: [
if (isSelected)
Icon(
Icons.check,
size: 22,
color: foregroundColor,
),
],
),
),
),
),
);
}
@override
void dispose() {
_endpointController.dispose();
@@ -296,11 +407,6 @@ class _SettingsScreenState extends State<SettingsScreen> {
child: Text('Forzar sincronizacion total:'),
),
ElevatedButton.icon(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.amber,
foregroundColor: Colors.black,
textStyle: const TextStyle(fontWeight: FontWeight.w700),
),
onPressed: (_isBusy || _isSyncing) ? null : _forceSync,
icon: _isSyncing
? const SizedBox(
@@ -314,6 +420,17 @@ class _SettingsScreenState extends State<SettingsScreen> {
],
),
const SizedBox(height: 24),
const Text('Color del esquema'),
const SizedBox(height: 8),
Wrap(
spacing: 12,
runSpacing: 12,
children: [
for (final Color color in _themeColorOptions)
_buildThemeColorButton(color),
],
),
const SizedBox(height: 24),
const Text('API endpoint (ej: http://localhost:3000/api)'),
const SizedBox(height: 8),
_buildResponsiveInputActionsRow(
lib/theme/app_theme.dart
+10 -5
View File
@@ -1,17 +1,22 @@
import 'package:flutter/material.dart';
class AppTheme {
static ThemeData get theme {
static ThemeData theme({Color seedColor = Colors.amber}) {
final Brightness foregroundBrightness =
ThemeData.estimateBrightnessForColor(seedColor);
final Color foregroundColor =
foregroundBrightness == Brightness.dark ? Colors.white : Colors.black;
return ThemeData(
useMaterial3: true,
scaffoldBackgroundColor: const Color.fromRGBO(31, 32, 33, 1),
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.amber,
seedColor: seedColor,
brightness: Brightness.dark,
),
floatingActionButtonTheme: const FloatingActionButtonThemeData(
backgroundColor: Colors.amber,
foregroundColor: Colors.black,
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: seedColor,
foregroundColor: foregroundColor,
),
);
}