Initial commit: Flutter Weight Tracker Web
This commit is contained in:
556
lib/widgets/add_weight_dialog.dart
Normal file
556
lib/widgets/add_weight_dialog.dart
Normal file
@@ -0,0 +1,556 @@
|
||||
import 'dart:ui';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import '../models/home_model.dart';
|
||||
|
||||
class AddWeightDialog extends StatefulWidget {
|
||||
final String personName;
|
||||
|
||||
/// Letztes bekanntes Gewicht dieser Person – wird für weightChange benötigt.
|
||||
final double lastWeight;
|
||||
|
||||
/// Wenn gesetzt → Edit-Modus: Felder werden vorausgefüllt.
|
||||
final WeightModel? existingEntry;
|
||||
|
||||
const AddWeightDialog({
|
||||
super.key,
|
||||
required this.personName,
|
||||
required this.lastWeight,
|
||||
this.existingEntry,
|
||||
});
|
||||
|
||||
/// Öffnet den Dialog zum Hinzufügen eines neuen Eintrags.
|
||||
static Future<WeightModel?> show({
|
||||
required String personName,
|
||||
required double lastWeight,
|
||||
}) {
|
||||
return Get.dialog<WeightModel>(
|
||||
AddWeightDialog(personName: personName, lastWeight: lastWeight),
|
||||
barrierColor: Colors.black.withValues(alpha: 0.55),
|
||||
);
|
||||
}
|
||||
|
||||
/// Öffnet den Dialog zum Bearbeiten eines vorhandenen Eintrags.
|
||||
/// [previousWeight] = Gewicht des Eintrags VOR dem zu bearbeitenden.
|
||||
static Future<WeightModel?> showEdit({
|
||||
required WeightModel entry,
|
||||
required double previousWeight,
|
||||
}) {
|
||||
return Get.dialog<WeightModel>(
|
||||
AddWeightDialog(
|
||||
personName: entry.name,
|
||||
lastWeight: previousWeight,
|
||||
existingEntry: entry,
|
||||
),
|
||||
barrierColor: Colors.black.withValues(alpha: 0.55),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
State<AddWeightDialog> createState() => _AddWeightDialogState();
|
||||
}
|
||||
|
||||
class _AddWeightDialogState extends State<AddWeightDialog>
|
||||
with SingleTickerProviderStateMixin {
|
||||
final _formKey = GlobalKey<FormState>();
|
||||
final _weightController = TextEditingController();
|
||||
late final TextEditingController _nameController;
|
||||
|
||||
DateTime _selectedDate = DateTime.now();
|
||||
double? _parsedWeight;
|
||||
late AnimationController _anim;
|
||||
late Animation<double> _fadeScale;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_nameController = TextEditingController(text: widget.personName);
|
||||
// Edit-Modus: Felder vorausfüllen
|
||||
if (widget.existingEntry != null) {
|
||||
final e = widget.existingEntry!;
|
||||
_weightController.text = e.weight.toString().replaceAll('.', ',');
|
||||
_parsedWeight = e.weight;
|
||||
_selectedDate = e.date;
|
||||
}
|
||||
_anim = AnimationController(
|
||||
vsync: this,
|
||||
duration: const Duration(milliseconds: 220),
|
||||
);
|
||||
_fadeScale = CurvedAnimation(parent: _anim, curve: Curves.easeOutBack);
|
||||
_anim.forward();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_weightController.dispose();
|
||||
_nameController.dispose();
|
||||
_anim.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
double get _weightChange {
|
||||
if (_parsedWeight == null || widget.lastWeight == 0) return 0;
|
||||
return double.parse(
|
||||
(_parsedWeight! - widget.lastWeight).toStringAsFixed(2),
|
||||
);
|
||||
}
|
||||
|
||||
Color get _changeColor {
|
||||
if (_weightChange < 0) return const Color(0xFF4FFFB0);
|
||||
if (_weightChange > 0) return const Color(0xFFFF6B6B);
|
||||
return Colors.white54;
|
||||
}
|
||||
|
||||
String get _changeLabel {
|
||||
if (_parsedWeight == null) return '';
|
||||
if (widget.lastWeight == 0) return 'Erster Eintrag';
|
||||
final sign = _weightChange > 0 ? '+' : '';
|
||||
return '$sign${_weightChange.toStringAsFixed(1)} kg';
|
||||
}
|
||||
|
||||
Future<void> _pickDate() async {
|
||||
final picked = await showDatePicker(
|
||||
context: context,
|
||||
initialDate: _selectedDate,
|
||||
firstDate: DateTime(2000),
|
||||
lastDate: DateTime(2100),
|
||||
builder: (context, child) => Theme(
|
||||
data: Theme.of(context).copyWith(
|
||||
colorScheme: const ColorScheme.dark(
|
||||
primary: Color(0xFF7B9FFF),
|
||||
onSurface: Colors.white,
|
||||
surface: Color(0xFF1A2035),
|
||||
),
|
||||
),
|
||||
child: child!,
|
||||
),
|
||||
);
|
||||
if (picked != null) setState(() => _selectedDate = picked);
|
||||
}
|
||||
|
||||
void _submit() {
|
||||
if (!_formKey.currentState!.validate()) return;
|
||||
final name = _nameController.text.trim();
|
||||
final entry = WeightModel(
|
||||
// Im Edit-Modus dieselbe ID behalten
|
||||
id:
|
||||
widget.existingEntry?.id ??
|
||||
DateTime.now().millisecondsSinceEpoch.toString(),
|
||||
name: name,
|
||||
weight: _parsedWeight!,
|
||||
date: _selectedDate,
|
||||
weightChange: widget.lastWeight == 0 ? 0 : _weightChange,
|
||||
);
|
||||
Navigator.of(context).pop(entry);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ScaleTransition(
|
||||
scale: _fadeScale,
|
||||
child: FadeTransition(
|
||||
opacity: _anim,
|
||||
child: Center(
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 460),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 40),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(24),
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 24, sigmaY: 24),
|
||||
child: Material(
|
||||
type: MaterialType.transparency,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withValues(alpha: 0.1),
|
||||
borderRadius: BorderRadius.circular(24),
|
||||
border: Border.all(
|
||||
color: Colors.white.withValues(alpha: 0.2),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: Form(
|
||||
key: _formKey,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// ── Titelzeile ──────────────────────────
|
||||
_DialogHeader(
|
||||
personName: widget.personName,
|
||||
isEdit: widget.existingEntry != null,
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(20, 20, 20, 0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// Name
|
||||
_GlassField(
|
||||
label: 'Name',
|
||||
icon: Icons.person_outline_rounded,
|
||||
child: TextFormField(
|
||||
controller: _nameController,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 16,
|
||||
),
|
||||
decoration: _inputDecoration('z. B. Joe'),
|
||||
validator: (v) =>
|
||||
(v == null || v.trim().isEmpty)
|
||||
? 'Name eingeben'
|
||||
: null,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 14),
|
||||
|
||||
// Gewicht
|
||||
_GlassField(
|
||||
label: 'Gewicht',
|
||||
icon: Icons.monitor_weight_outlined,
|
||||
child: TextFormField(
|
||||
controller: _weightController,
|
||||
keyboardType:
|
||||
const TextInputType.numberWithOptions(
|
||||
decimal: true,
|
||||
),
|
||||
inputFormatters: [
|
||||
FilteringTextInputFormatter.allow(
|
||||
RegExp(r'^\d*[.,]?\d*'),
|
||||
),
|
||||
],
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 16,
|
||||
),
|
||||
decoration: _inputDecoration(
|
||||
'z. B. 72,5',
|
||||
),
|
||||
onChanged: (v) {
|
||||
final parsed = double.tryParse(
|
||||
v.replaceAll(',', '.'),
|
||||
);
|
||||
setState(() => _parsedWeight = parsed);
|
||||
},
|
||||
validator: (v) {
|
||||
if (v == null || v.isEmpty) {
|
||||
return 'Gewicht eingeben';
|
||||
}
|
||||
if (double.tryParse(
|
||||
v.replaceAll(',', '.'),
|
||||
) ==
|
||||
null) {
|
||||
return 'Ungültige Zahl';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 14),
|
||||
|
||||
// Datum
|
||||
_GlassField(
|
||||
label: 'Datum',
|
||||
icon: Icons.calendar_today_outlined,
|
||||
child: InkWell(
|
||||
onTap: _pickDate,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
child: InputDecorator(
|
||||
decoration: _inputDecoration(''),
|
||||
child: Text(
|
||||
DateFormat(
|
||||
'dd.MM.yyyy',
|
||||
).format(_selectedDate),
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 16,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
|
||||
// Vorschau weightChange
|
||||
if (_parsedWeight != null)
|
||||
_ChangePreview(
|
||||
label: _changeLabel,
|
||||
color: _changeColor,
|
||||
lastWeight: widget.lastWeight,
|
||||
),
|
||||
if (_parsedWeight != null)
|
||||
const SizedBox(height: 20),
|
||||
|
||||
// Buttons
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: _GlassButton(
|
||||
label: 'Abbrechen',
|
||||
onPressed: () =>
|
||||
Navigator.of(context).pop(),
|
||||
primary: false,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: _GlassButton(
|
||||
label: widget.existingEntry != null
|
||||
? 'Speichern'
|
||||
: 'Hinzufügen',
|
||||
onPressed: _submit,
|
||||
primary: true,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
), // Form
|
||||
), // Container
|
||||
), // Material
|
||||
), // BackdropFilter
|
||||
), // ClipRRect
|
||||
), // Padding
|
||||
), // ConstrainedBox
|
||||
), // Center
|
||||
), // FadeTransition
|
||||
); // ScaleTransition
|
||||
}
|
||||
|
||||
InputDecoration _inputDecoration(String hint) => InputDecoration(
|
||||
hintText: hint,
|
||||
hintStyle: TextStyle(
|
||||
color: Colors.white.withValues(alpha: 0.35),
|
||||
fontSize: 14,
|
||||
),
|
||||
filled: true,
|
||||
fillColor: Colors.white.withValues(alpha: 0.07),
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: BorderSide(color: Colors.white.withValues(alpha: 0.2)),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: BorderSide(color: Colors.white.withValues(alpha: 0.2)),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: const BorderSide(color: Color(0xFF7B9FFF), width: 1.5),
|
||||
),
|
||||
errorBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: const BorderSide(color: Color(0xFFFF6B6B), width: 1.2),
|
||||
),
|
||||
focusedErrorBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: const BorderSide(color: Color(0xFFFF6B6B), width: 1.5),
|
||||
),
|
||||
errorStyle: const TextStyle(color: Color(0xFFFF6B6B), fontSize: 11),
|
||||
);
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Hilfs-Widgets
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
class _DialogHeader extends StatelessWidget {
|
||||
final String personName;
|
||||
final bool isEdit;
|
||||
const _DialogHeader({required this.personName, this.isEdit = false});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.fromLTRB(20, 18, 12, 14),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withValues(alpha: 0.06),
|
||||
border: Border(
|
||||
bottom: BorderSide(color: Colors.white.withValues(alpha: 0.12)),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
isEdit ? Icons.edit_outlined : Icons.add_circle_outline_rounded,
|
||||
color: const Color(0xFF7B9FFF),
|
||||
size: 22,
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
isEdit ? 'Eintrag bearbeiten' : 'Gewicht hinzufügen',
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 17,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: 0.3,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
personName,
|
||||
style: TextStyle(
|
||||
color: Colors.white.withValues(alpha: 0.55),
|
||||
fontSize: 13,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
IconButton(
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
icon: Icon(
|
||||
Icons.close_rounded,
|
||||
color: Colors.white.withValues(alpha: 0.5),
|
||||
size: 20,
|
||||
),
|
||||
splashRadius: 18,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _GlassField extends StatelessWidget {
|
||||
final String label;
|
||||
final IconData icon;
|
||||
final Widget child;
|
||||
|
||||
const _GlassField({
|
||||
required this.label,
|
||||
required this.icon,
|
||||
required this.child,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Icon(icon, color: Colors.white.withValues(alpha: 0.5), size: 14),
|
||||
const SizedBox(width: 6),
|
||||
Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
color: Colors.white.withValues(alpha: 0.6),
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: 0.8,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
child,
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ChangePreview extends StatelessWidget {
|
||||
final String label;
|
||||
final Color color;
|
||||
final double lastWeight;
|
||||
|
||||
const _ChangePreview({
|
||||
required this.label,
|
||||
required this.color,
|
||||
required this.lastWeight,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
|
||||
decoration: BoxDecoration(
|
||||
color: color.withValues(alpha: 0.1),
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
border: Border.all(color: color.withValues(alpha: 0.35)),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.swap_vert_rounded, color: color, size: 18),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
lastWeight == 0 ? label : 'Änderung zum letzten Eintrag: ',
|
||||
style: TextStyle(
|
||||
color: Colors.white.withValues(alpha: 0.7),
|
||||
fontSize: 13,
|
||||
),
|
||||
),
|
||||
if (lastWeight != 0)
|
||||
Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
color: color,
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _GlassButton extends StatelessWidget {
|
||||
final String label;
|
||||
final VoidCallback onPressed;
|
||||
final bool primary;
|
||||
|
||||
const _GlassButton({
|
||||
required this.label,
|
||||
required this.onPressed,
|
||||
required this.primary,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: onPressed,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(vertical: 13),
|
||||
decoration: BoxDecoration(
|
||||
color: primary
|
||||
? const Color(0xFF7B9FFF).withValues(alpha: 0.25)
|
||||
: Colors.white.withValues(alpha: 0.07),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(
|
||||
color: primary
|
||||
? const Color(0xFF7B9FFF).withValues(alpha: 0.6)
|
||||
: Colors.white.withValues(alpha: 0.15),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
alignment: Alignment.center,
|
||||
child: Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
color: primary ? const Color(0xFF7B9FFF) : Colors.white60,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontSize: 14,
|
||||
letterSpacing: 0.3,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
143
lib/widgets/glass_app_bar.dart
Normal file
143
lib/widgets/glass_app_bar.dart
Normal file
@@ -0,0 +1,143 @@
|
||||
import 'dart:ui';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'outlined_text.dart';
|
||||
|
||||
class GlassAppBar extends StatelessWidget implements PreferredSizeWidget {
|
||||
final String title;
|
||||
final String? subtitle;
|
||||
final List<Widget>? actions;
|
||||
final Widget? leading;
|
||||
final double height;
|
||||
final Color glassColor;
|
||||
final double blurSigma;
|
||||
final double borderOpacity;
|
||||
|
||||
const GlassAppBar({
|
||||
super.key,
|
||||
required this.title,
|
||||
this.subtitle,
|
||||
this.actions,
|
||||
this.leading,
|
||||
this.height = 80,
|
||||
this.glassColor = const Color(0x22FFFFFF),
|
||||
this.blurSigma = 18,
|
||||
this.borderOpacity = 0.25,
|
||||
});
|
||||
|
||||
@override
|
||||
Size get preferredSize => Size.fromHeight(height);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
|
||||
return ClipRect(
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: blurSigma, sigmaY: blurSigma),
|
||||
child: Container(
|
||||
height: height,
|
||||
decoration: BoxDecoration(
|
||||
color: glassColor,
|
||||
border: Border(
|
||||
bottom: BorderSide(
|
||||
color: Colors.white.withOpacity(borderOpacity),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
),
|
||||
child: SafeArea(
|
||||
bottom: false,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
if (leading != null) ...[leading!, const SizedBox(width: 12)],
|
||||
Expanded(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
OutlinedText(
|
||||
title,
|
||||
style: theme.textTheme.headlineSmall!.copyWith(
|
||||
fontWeight: FontWeight.w900,
|
||||
letterSpacing: 0.8,
|
||||
fontSize: 26,
|
||||
),
|
||||
fillColor: Colors.white,
|
||||
strokeColor: Colors.black,
|
||||
strokeWidth: 2.5,
|
||||
),
|
||||
if (subtitle != null) ...[
|
||||
const SizedBox(height: 3),
|
||||
OutlinedText(
|
||||
subtitle!,
|
||||
style: theme.textTheme.bodyMedium!.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: 0.4,
|
||||
),
|
||||
fillColor: Colors.white.withOpacity(0.95),
|
||||
strokeColor: Colors.black,
|
||||
strokeWidth: 1.5,
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
if (actions != null)
|
||||
Row(mainAxisSize: MainAxisSize.min, children: actions!),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Ein Icon-Button im Glas-Stil, passend zur GlassAppBar.
|
||||
class GlassIconButton extends StatelessWidget {
|
||||
final IconData icon;
|
||||
final VoidCallback? onPressed;
|
||||
final String? tooltip;
|
||||
final Color? color;
|
||||
|
||||
const GlassIconButton({
|
||||
super.key,
|
||||
required this.icon,
|
||||
this.onPressed,
|
||||
this.tooltip,
|
||||
this.color,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final iconColor =
|
||||
color ?? Theme.of(context).colorScheme.onSurface.withOpacity(0.85);
|
||||
return Tooltip(
|
||||
message: tooltip ?? '',
|
||||
child: InkWell(
|
||||
onTap: onPressed,
|
||||
borderRadius: BorderRadius.circular(50),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(50),
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 8, sigmaY: 8),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(10),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withOpacity(0.12),
|
||||
shape: BoxShape.circle,
|
||||
border: Border.all(color: Colors.white.withOpacity(0.25)),
|
||||
),
|
||||
child: Icon(icon, color: iconColor, size: 22),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
38
lib/widgets/outlined_text.dart
Normal file
38
lib/widgets/outlined_text.dart
Normal file
@@ -0,0 +1,38 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// Rendert Text mit einer farbigen Kontur (Stroke) via Stack.
|
||||
class OutlinedText extends StatelessWidget {
|
||||
final String text;
|
||||
final TextStyle style;
|
||||
final Color fillColor;
|
||||
final Color strokeColor;
|
||||
final double strokeWidth;
|
||||
|
||||
const OutlinedText(
|
||||
this.text, {
|
||||
super.key,
|
||||
required this.style,
|
||||
required this.fillColor,
|
||||
this.strokeColor = Colors.black,
|
||||
this.strokeWidth = 2.0,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final strokeStyle = style.copyWith(
|
||||
foreground: Paint()
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = strokeWidth
|
||||
..strokeJoin = StrokeJoin.round
|
||||
..color = strokeColor,
|
||||
);
|
||||
final fillStyle = style.copyWith(color: fillColor);
|
||||
|
||||
return Stack(
|
||||
children: [
|
||||
Text(text, style: strokeStyle),
|
||||
Text(text, style: fillStyle),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
434
lib/widgets/person_weight_card.dart
Normal file
434
lib/widgets/person_weight_card.dart
Normal file
@@ -0,0 +1,434 @@
|
||||
import 'dart:ui';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import '../models/home_model.dart';
|
||||
import 'outlined_text.dart';
|
||||
|
||||
class PersonWeightCard extends StatelessWidget {
|
||||
/// Alle Einträge einer Person, absteigend nach Datum sortiert.
|
||||
final String personName;
|
||||
final List<WeightModel> entries;
|
||||
final VoidCallback? onAddWeight;
|
||||
|
||||
/// Wird aufgerufen wenn ein Verlaufseintrag oder der Header-Eintrag
|
||||
/// zum Bearbeiten angeklickt wird.
|
||||
final void Function(WeightModel entry)? onEditEntry;
|
||||
|
||||
const PersonWeightCard({
|
||||
super.key,
|
||||
required this.personName,
|
||||
required this.entries,
|
||||
this.onAddWeight,
|
||||
this.onEditEntry,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// Defensiv: sicher sortiert (neuestes zuerst)
|
||||
final sorted = [...entries]..sort((a, b) => b.date.compareTo(a.date));
|
||||
|
||||
final current = sorted.first;
|
||||
final history = sorted.skip(1).toList();
|
||||
|
||||
return ClipRRect(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withValues(alpha: 0.07),
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
border: Border.all(
|
||||
color: Colors.white.withValues(alpha: 0.15),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// ── Header ──────────────────────────────────────────
|
||||
_CardHeader(
|
||||
current: current,
|
||||
name: personName,
|
||||
onAddWeight: onAddWeight,
|
||||
onEdit: onEditEntry != null
|
||||
? () => onEditEntry!(current)
|
||||
: null,
|
||||
),
|
||||
|
||||
// ── Historische Einträge ─────────────────────────────
|
||||
if (history.isNotEmpty) ...[
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
vertical: 6,
|
||||
),
|
||||
child: Text(
|
||||
'Verlauf',
|
||||
style: TextStyle(
|
||||
color: Colors.white.withValues(alpha: 0.45),
|
||||
fontSize: 12,
|
||||
letterSpacing: 1.2,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxHeight: 220),
|
||||
child: ListView.separated(
|
||||
shrinkWrap: true,
|
||||
padding: const EdgeInsets.only(
|
||||
left: 12,
|
||||
right: 12,
|
||||
bottom: 12,
|
||||
),
|
||||
itemCount: history.length,
|
||||
separatorBuilder: (_, __) => Divider(
|
||||
color: Colors.white.withValues(alpha: 0.08),
|
||||
height: 1,
|
||||
),
|
||||
itemBuilder: (context, i) => _HistoryRow(
|
||||
entry: history[i],
|
||||
onTap: onEditEntry != null
|
||||
? () => onEditEntry!(history[i])
|
||||
: null,
|
||||
),
|
||||
),
|
||||
),
|
||||
] else ...[
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
|
||||
child: Text(
|
||||
'Noch keine älteren Einträge.',
|
||||
style: TextStyle(
|
||||
color: Colors.white.withValues(alpha: 0.35),
|
||||
fontSize: 13,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Header
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
class _CardHeader extends StatelessWidget {
|
||||
final WeightModel current;
|
||||
final String name;
|
||||
final VoidCallback? onAddWeight;
|
||||
final VoidCallback? onEdit;
|
||||
|
||||
const _CardHeader({
|
||||
required this.current,
|
||||
required this.name,
|
||||
this.onAddWeight,
|
||||
this.onEdit,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final changeColor = current.weightChange < 0
|
||||
? const Color(0xFF4FFFB0)
|
||||
: current.weightChange > 0
|
||||
? const Color(0xFFFF6B6B)
|
||||
: Colors.white54;
|
||||
|
||||
final changeIcon = current.weightChange < 0
|
||||
? Icons.trending_down_rounded
|
||||
: current.weightChange > 0
|
||||
? Icons.trending_up_rounded
|
||||
: Icons.remove_rounded;
|
||||
|
||||
return Container(
|
||||
padding: const EdgeInsets.fromLTRB(16, 18, 16, 14),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withValues(alpha: 0.05),
|
||||
borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
|
||||
border: Border(
|
||||
bottom: BorderSide(color: Colors.white.withValues(alpha: 0.1)),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
// Avatar
|
||||
CircleAvatar(
|
||||
radius: 26,
|
||||
backgroundColor: Colors.white.withValues(alpha: 0.12),
|
||||
child: OutlinedText(
|
||||
name[0].toUpperCase(),
|
||||
style: const TextStyle(fontSize: 22, fontWeight: FontWeight.w900),
|
||||
fillColor: Colors.white,
|
||||
strokeColor: Colors.black,
|
||||
strokeWidth: 1.5,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 14),
|
||||
// Name + Datum
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
OutlinedText(
|
||||
name,
|
||||
style: const TextStyle(
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.w900,
|
||||
letterSpacing: 0.4,
|
||||
),
|
||||
fillColor: Colors.white,
|
||||
strokeColor: Colors.black,
|
||||
strokeWidth: 2,
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
'Zuletzt: ${DateFormat('dd.MM.yyyy').format(current.date)}',
|
||||
style: TextStyle(
|
||||
color: Colors.white.withValues(alpha: 0.5),
|
||||
fontSize: 12,
|
||||
letterSpacing: 0.3,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// Add-Button
|
||||
if (onAddWeight != null) _GlassAddButton(onPressed: onAddWeight!),
|
||||
if (onEdit != null) ...[
|
||||
const SizedBox(width: 6),
|
||||
_GlassEditButton(onPressed: onEdit!),
|
||||
],
|
||||
const SizedBox(width: 8),
|
||||
// Aktuelles Gewicht + Änderung
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
OutlinedText(
|
||||
'${current.weight.toStringAsFixed(1)} kg',
|
||||
style: const TextStyle(
|
||||
fontSize: 26,
|
||||
fontWeight: FontWeight.w900,
|
||||
letterSpacing: 0.2,
|
||||
),
|
||||
fillColor: Colors.white,
|
||||
strokeColor: Colors.black,
|
||||
strokeWidth: 2,
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(changeIcon, color: changeColor, size: 16),
|
||||
const SizedBox(width: 3),
|
||||
Text(
|
||||
current.weightChange == 0
|
||||
? '±0.0 kg'
|
||||
: '${current.weightChange > 0 ? '+' : ''}${current.weightChange.toStringAsFixed(1)} kg',
|
||||
style: TextStyle(
|
||||
color: changeColor,
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Verlaufs-Zeile
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
class _HistoryRow extends StatelessWidget {
|
||||
final WeightModel entry;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const _HistoryRow({required this.entry, this.onTap});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final changeColor = entry.weightChange < 0
|
||||
? const Color(0xFF4FFFB0)
|
||||
: entry.weightChange > 0
|
||||
? const Color(0xFFFF6B6B)
|
||||
: Colors.white54;
|
||||
|
||||
return InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 11, horizontal: 6),
|
||||
child: Row(
|
||||
children: [
|
||||
// Datum
|
||||
Expanded(
|
||||
flex: 3,
|
||||
child: Text(
|
||||
DateFormat('dd.MM.yyyy').format(entry.date),
|
||||
style: TextStyle(
|
||||
color: Colors.white.withValues(alpha: 0.6),
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
),
|
||||
// Gewicht
|
||||
Expanded(
|
||||
flex: 2,
|
||||
child: Text(
|
||||
'${entry.weight.toStringAsFixed(1)} kg',
|
||||
textAlign: TextAlign.center,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
// Änderung
|
||||
Expanded(
|
||||
flex: 2,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
Icon(
|
||||
entry.weightChange < 0
|
||||
? Icons.arrow_downward_rounded
|
||||
: entry.weightChange > 0
|
||||
? Icons.arrow_upward_rounded
|
||||
: Icons.remove_rounded,
|
||||
color: changeColor,
|
||||
size: 14,
|
||||
),
|
||||
const SizedBox(width: 2),
|
||||
Text(
|
||||
entry.weightChange == 0
|
||||
? '±0.0'
|
||||
: '${entry.weightChange > 0 ? '+' : ''}${entry.weightChange.toStringAsFixed(1)}',
|
||||
style: TextStyle(
|
||||
color: changeColor,
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// Edit-Button – gut sichtbar auf Mobile
|
||||
if (onTap != null) ...[
|
||||
const SizedBox(width: 10),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 9, vertical: 6),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withValues(alpha: 0.12),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
border: Border.all(
|
||||
color: Colors.white.withValues(alpha: 0.25),
|
||||
),
|
||||
),
|
||||
child: const Icon(
|
||||
Icons.edit_outlined,
|
||||
size: 16,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Glas-Add-Button (runder "+"-Button passend zum Karten-Header)
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
/// Ein runder Bearbeiten-Button im Glas-Stil.
|
||||
class _GlassEditButton extends StatelessWidget {
|
||||
final VoidCallback onPressed;
|
||||
|
||||
const _GlassEditButton({required this.onPressed});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Tooltip(
|
||||
message: 'Eintrag bearbeiten',
|
||||
child: InkWell(
|
||||
onTap: onPressed,
|
||||
borderRadius: BorderRadius.circular(50),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(50),
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 8, sigmaY: 8),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(8),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withValues(alpha: 0.10),
|
||||
shape: BoxShape.circle,
|
||||
border: Border.all(color: Colors.white.withValues(alpha: 0.25)),
|
||||
),
|
||||
child: const Icon(
|
||||
Icons.edit_outlined,
|
||||
color: Colors.white,
|
||||
size: 18,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Glas-Add-Button
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
class _GlassAddButton extends StatelessWidget {
|
||||
final VoidCallback onPressed;
|
||||
|
||||
const _GlassAddButton({required this.onPressed});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Tooltip(
|
||||
message: 'Gewicht hinzufügen',
|
||||
child: InkWell(
|
||||
onTap: onPressed,
|
||||
borderRadius: BorderRadius.circular(50),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(50),
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 8, sigmaY: 8),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(8),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withValues(alpha: 0.14),
|
||||
shape: BoxShape.circle,
|
||||
border: Border.all(color: Colors.white.withValues(alpha: 0.3)),
|
||||
),
|
||||
child: const Icon(
|
||||
Icons.add_rounded,
|
||||
color: Colors.white,
|
||||
size: 20,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user