Feature: Add Settings module with PanelNavigator, AppSettingsView, and related components for nested navigation + theming
This commit is contained in:
@@ -0,0 +1,242 @@
|
||||
import 'package:app/modules/settings/modules/app/model/app_settings_view_model.dart';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
class AppSettingsView extends StatelessWidget {
|
||||
const AppSettingsView({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ChangeNotifierProvider(
|
||||
create: (_) => AppSettingsViewModel()..load(),
|
||||
child: const _AppSettingsContent(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _AppSettingsContent extends StatelessWidget {
|
||||
const _AppSettingsContent();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final vm = context.watch<AppSettingsViewModel>();
|
||||
final isLoading = vm.isLoading;
|
||||
|
||||
return Column(
|
||||
children: [
|
||||
// const PanelHeader(title: 'App-Einstellungen'),
|
||||
if (isLoading)
|
||||
const Expanded(child: Center(child: CircularProgressIndicator()))
|
||||
else
|
||||
Expanded(
|
||||
child: ListView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
children: [
|
||||
_SystemBackgroundSection(),
|
||||
const SizedBox(height: 16),
|
||||
_TextSizeSection(),
|
||||
const SizedBox(height: 16),
|
||||
_LanguageSection(),
|
||||
const SizedBox(height: 24),
|
||||
_SaveButton(),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _SystemBackgroundSection extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final vm = context.watch<AppSettingsViewModel>();
|
||||
final scheme = Theme.of(context).colorScheme;
|
||||
|
||||
// A few pleasant presets; extend as needed.
|
||||
final presets = <Color>[
|
||||
const Color(0xFFFFFFFF),
|
||||
const Color(0xFFF5F5F5),
|
||||
const Color(0xFF121212),
|
||||
const Color(0xFF1E1E1E),
|
||||
Colors.blueGrey.shade50,
|
||||
Colors.blueGrey.shade900,
|
||||
];
|
||||
|
||||
final isSystem = vm.backgroundColorSystem == null;
|
||||
final selected = vm.backgroundColorSystem;
|
||||
|
||||
Widget chip({
|
||||
required Widget child,
|
||||
required bool selected,
|
||||
required VoidCallback onTap,
|
||||
}) {
|
||||
return InkWell(
|
||||
borderRadius: BorderRadius.circular(22),
|
||||
onTap: onTap,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(22),
|
||||
border: Border.all(
|
||||
color: selected ? scheme.primary : scheme.outlineVariant,
|
||||
),
|
||||
),
|
||||
child: child,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'System-Hintergrundfarbe',
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: [
|
||||
chip(
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const Icon(Icons.phone_android, size: 18),
|
||||
const SizedBox(width: 6),
|
||||
Text(
|
||||
'Systemstandard',
|
||||
style: Theme.of(context).textTheme.bodyMedium,
|
||||
),
|
||||
],
|
||||
),
|
||||
selected: isSystem,
|
||||
onTap: () => vm.setSystemBackgroundColor(null),
|
||||
),
|
||||
...presets.map((c) {
|
||||
final bool sel = selected == c;
|
||||
return GestureDetector(
|
||||
onTap: () => vm.setSystemBackgroundColor(c),
|
||||
child: Container(
|
||||
width: 40,
|
||||
height: 40,
|
||||
decoration: BoxDecoration(
|
||||
color: c,
|
||||
shape: BoxShape.circle,
|
||||
border: Border.all(
|
||||
color: sel ? scheme.primary : scheme.outlineVariant,
|
||||
width: sel ? 2 : 1,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
isSystem
|
||||
? 'Aktuell: Systemstandard'
|
||||
: 'Aktuell: Benutzerdefinierte Farbe',
|
||||
style: Theme.of(
|
||||
context,
|
||||
).textTheme.bodySmall?.copyWith(color: scheme.outline),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _TextSizeSection extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final vm = context.watch<AppSettingsViewModel>();
|
||||
final selected = vm.textSize;
|
||||
|
||||
Widget radio(AppTextSize size, String label, String sub) {
|
||||
return RadioListTile<AppTextSize>(
|
||||
value: size,
|
||||
groupValue: selected,
|
||||
onChanged: (v) => vm.setTextSize(v ?? AppTextSize.normal),
|
||||
title: Text(label),
|
||||
subtitle: Text(sub),
|
||||
);
|
||||
}
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text('Textgröße', style: Theme.of(context).textTheme.titleMedium),
|
||||
const SizedBox(height: 8),
|
||||
radio(AppTextSize.small, 'Klein', 'Kompakte Darstellung'),
|
||||
radio(AppTextSize.normal, 'Standard', 'Empfohlene Einstellung'),
|
||||
radio(AppTextSize.large, 'Groß', 'Größere, besser lesbare Texte'),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _LanguageSection extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final vm = context.watch<AppSettingsViewModel>();
|
||||
final scheme = Theme.of(context).colorScheme;
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text('Sprache', style: Theme.of(context).textTheme.titleMedium),
|
||||
const SizedBox(height: 8),
|
||||
DropdownButtonFormField<AppLanguage>(
|
||||
value: vm.language,
|
||||
onChanged: (v) => vm.setLanguage(v ?? AppLanguage.de),
|
||||
items: const [
|
||||
DropdownMenuItem(value: AppLanguage.de, child: Text('Deutsch')),
|
||||
DropdownMenuItem(value: AppLanguage.en, child: Text('Englisch')),
|
||||
],
|
||||
decoration: InputDecoration(
|
||||
isDense: true,
|
||||
border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
'Änderungen wirken sich nach dem Speichern aus.',
|
||||
style: Theme.of(
|
||||
context,
|
||||
).textTheme.bodySmall?.copyWith(color: scheme.outline),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _SaveButton extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final vm = context.watch<AppSettingsViewModel>();
|
||||
|
||||
return FilledButton.icon(
|
||||
onPressed: vm.isSaving
|
||||
? null
|
||||
: () async {
|
||||
await vm.save();
|
||||
if (context.mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(content: Text('Einstellungen gespeichert')),
|
||||
);
|
||||
}
|
||||
},
|
||||
icon: vm.isSaving
|
||||
? const SizedBox(
|
||||
width: 18,
|
||||
height: 18,
|
||||
child: CircularProgressIndicator(strokeWidth: 2),
|
||||
)
|
||||
: const Icon(Icons.save_outlined),
|
||||
label: const Text('Speichern'),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// Domain-ish enums for clarity and easy (de)serialization.
|
||||
enum AppTextSize { small, normal, large }
|
||||
|
||||
enum AppLanguage { de, en }
|
||||
|
||||
class AppSettingsViewModel extends ChangeNotifier {
|
||||
/// Use `null` to represent "system default background".
|
||||
Color? _backgroundColorSystem;
|
||||
AppTextSize _textSize = AppTextSize.normal;
|
||||
AppLanguage _language = AppLanguage.de;
|
||||
|
||||
bool _isLoading = false;
|
||||
bool _isSaving = false;
|
||||
|
||||
Color? get backgroundColorSystem => _backgroundColorSystem;
|
||||
|
||||
AppTextSize get textSize => _textSize;
|
||||
|
||||
AppLanguage get language => _language;
|
||||
|
||||
bool get isLoading => _isLoading;
|
||||
|
||||
bool get isSaving => _isSaving;
|
||||
|
||||
/// Pretend to load from backend. Plug your repository here later.
|
||||
Future<void> load() async {
|
||||
_isLoading = true;
|
||||
notifyListeners();
|
||||
|
||||
// TODO: Replace with real backend call.
|
||||
await Future<void>.delayed(const Duration(milliseconds: 200));
|
||||
|
||||
// Example defaults (could come from server response).
|
||||
_backgroundColorSystem = null; // null => Systemstandard
|
||||
_textSize = AppTextSize.normal;
|
||||
_language = AppLanguage.de;
|
||||
|
||||
_isLoading = false;
|
||||
notifyListeners();
|
||||
}
|
||||
|
||||
/// Save to backend (stub).
|
||||
Future<void> save() async {
|
||||
if (_isSaving) return;
|
||||
_isSaving = true;
|
||||
notifyListeners();
|
||||
|
||||
// TODO: Replace with real backend update.
|
||||
await Future<void>.delayed(const Duration(milliseconds: 300));
|
||||
|
||||
_isSaving = false;
|
||||
notifyListeners();
|
||||
}
|
||||
|
||||
void setSystemBackgroundColor(Color? colorOrNullForSystem) {
|
||||
_backgroundColorSystem = colorOrNullForSystem;
|
||||
notifyListeners();
|
||||
}
|
||||
|
||||
void setTextSize(AppTextSize size) {
|
||||
_textSize = size;
|
||||
notifyListeners();
|
||||
}
|
||||
|
||||
void setLanguage(AppLanguage lang) {
|
||||
_language = lang;
|
||||
notifyListeners();
|
||||
}
|
||||
|
||||
Map<String, dynamic> toJson() => {
|
||||
'backgroundColorSystem': _backgroundColorSystem?.value,
|
||||
// null => system
|
||||
'textSize': _textSize.name,
|
||||
'language': _language.name,
|
||||
};
|
||||
|
||||
void fromJson(Map<String, dynamic> json) {
|
||||
final int? colorValue = json['backgroundColorSystem'] as int?;
|
||||
_backgroundColorSystem = colorValue != null ? Color(colorValue) : null;
|
||||
|
||||
final ts = json['textSize'] as String?;
|
||||
_textSize = AppTextSize.values.firstWhere(
|
||||
(e) => e.name == ts,
|
||||
orElse: () => AppTextSize.normal,
|
||||
);
|
||||
|
||||
final lng = json['language'] as String?;
|
||||
_language = AppLanguage.values.firstWhere(
|
||||
(e) => e.name == lng,
|
||||
orElse: () => AppLanguage.de,
|
||||
);
|
||||
|
||||
notifyListeners();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user