add detail page

This commit is contained in:
atseirjo
2026-01-15 11:40:09 +01:00
parent bbd6d7c49c
commit b9f379ad53
43 changed files with 942 additions and 128 deletions

View File

@@ -0,0 +1,56 @@
import 'package:get/get.dart';
import '../model/filament_model.dart';
import '../helpers/filament_repository.dart';
class DetailsController extends GetxController {
Rx<FilamentModel?> filament = Rx<FilamentModel?>(null);
final isEditing = false.obs;
@override
void onInit() {
if (Get.arguments != null && Get.arguments['filament'] != null) {
filament.value = Get.arguments['filament'];
}
super.onInit();
}
void toggleEdit() {
isEditing.value = !isEditing.value;
}
void updateFilament(FilamentModel updatedFilament) {
FilamentRepository.to.updateFilament(updatedFilament);
filament.value = updatedFilament;
isEditing.value = false;
Get.snackbar(
'Erfolg',
'Filament wurde aktualisiert',
snackPosition: SnackPosition.BOTTOM,
);
}
void deleteFilament() {
if (filament.value != null) {
FilamentRepository.to.deleteFilament(filament.value!.id);
Get.back();
Get.snackbar(
'Gelöscht',
'Filament wurde entfernt',
snackPosition: SnackPosition.BOTTOM,
);
}
}
double get remainingWeight {
if (filament.value == null) return 0;
return filament.value!.weight - filament.value!.weightUsed;
}
double get usagePercentage {
if (filament.value == null || filament.value!.weight == 0) return 0;
return (filament.value!.weightUsed / filament.value!.weight) * 100;
}
@override
void onClose() {}
}

View File

@@ -1,6 +1,7 @@
import 'package:get/get.dart';
import '../../model/filament_model.dart';
import '../../helpers/filament_repository.dart';
import '../pages/details_view.dart';
class ListController extends GetxController {
final filamentList = <FilamentModel>[].obs;
@@ -30,7 +31,9 @@ class ListController extends GetxController {
void addNewFilament() {}
void viewFilamentDetails(FilamentModel filament) {}
void viewFilamentDetails(FilamentModel filament) {
Get.toNamed(DetailsPage.namedRoute, arguments: {'filament': filament});
}
void editFilament(FilamentModel filament) {}

View File

@@ -1,5 +1,6 @@
import 'package:get/get.dart';
import '../controllers/details_controller.dart';
import '../controllers/home_controller.dart';
import '../controllers/list_controller.dart';
@@ -11,6 +12,7 @@ class SampleBindings extends Bindings {
// Define your dependencies here no permanent Binding
Get.lazyPut<HomeController>(() => HomeController());
Get.lazyPut<ListController>(() => ListController());
Get.lazyPut<DetailsController>(() => DetailsController());
}
}

View File

@@ -2,6 +2,7 @@ import 'package:get/get.dart';
import 'sample_bindings.dart';
import '../pages/home_view.dart';
import '../pages/list_view.dart';
import '../pages/details_view.dart';
@@ -19,6 +20,11 @@ class SampleRouts {
page: () => const ListPage(),
binding: sampleBindings,
),
GetPage(
name: DetailsPage.namedRoute,
page: () => const DetailsPage(),
binding: sampleBindings,
),
];

View File

@@ -6,6 +6,7 @@ class FilamentModel {
final String type; // PLA, ABS, PETG, etc.
final String color;
final double weight; // in Gramm
final double weightUsed;
final double price; // Preis
final String? manufacturer;
final String? purchaseDate;
@@ -20,13 +21,14 @@ class FilamentModel {
required this.type,
required this.color,
required this.weight,
required this.weightUsed,
required this.price,
this.manufacturer,
this.purchaseDate,
this.notes,
this.pices,
this.printingTemp,
this.bedTemp,
this.bedTemp
});
// JSON Serialisierung
@@ -44,6 +46,7 @@ class FilamentModel {
'pices': pices,
'printingTemp': printingTemp,
'bedTemp': bedTemp,
'printWeightUsed': weightUsed,
};
}
@@ -55,6 +58,7 @@ class FilamentModel {
type: json['type'] as String,
color: json['color'] as String,
weight: (json['weight'] as num).toDouble(),
weightUsed: (json['weightUsed'] as num).toDouble(),
price: (json['price'] as num).toDouble(),
manufacturer: json['manufacturer'] as String?,
purchaseDate: json['purchaseDate'] as String?,
@@ -79,6 +83,7 @@ class FilamentModel {
int? pices,
int? printingTemp,
int? bedTemp,
double? weightUsed,
}) {
return FilamentModel(
id: id ?? this.id,
@@ -86,6 +91,7 @@ class FilamentModel {
type: type ?? this.type,
color: color ?? this.color,
weight: weight ?? this.weight,
weightUsed: weightUsed ?? this.weightUsed,
price: price ?? this.price,
manufacturer: manufacturer ?? this.manufacturer,
purchaseDate: purchaseDate ?? this.purchaseDate,
@@ -108,6 +114,7 @@ class FilamentModel {
type: 'PLA',
color: 'White',
weight: 1000.0,
weightUsed: 250.0,
price: 19.99,
manufacturer: '3Djake.at',
purchaseDate: formatDate(DateTime(2026, 1, 10)),
@@ -122,6 +129,7 @@ class FilamentModel {
type: 'PETG',
color: 'Black',
weight: 1000.0,
weightUsed: 0.0,
price: 9.99,
manufacturer: 'geeetech.com',
purchaseDate: formatDate(DateTime(2025, 10, 10)),
@@ -136,6 +144,7 @@ class FilamentModel {
type: 'ASA',
color: 'Black',
weight: 1000.0,
weightUsed: 150.0,
price: 16.01,
pices: 1,
manufacturer: 'tinmorry.com',

415
lib/pages/details_view.dart Normal file
View File

@@ -0,0 +1,415 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/details_controller.dart';
import '../widgets/detail_header.dart';
import '../widgets/detail_info_card.dart';
import '../widgets/progress_ring.dart';
import '../widgets/action_button.dart';
class DetailsPage extends GetView<DetailsController> {
static const String namedRoute = '/details-page';
const DetailsPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey.shade50,
body: Obx(() {
final filament = controller.filament.value;
if (filament == null) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.error_outline, size: 64, color: Colors.grey),
SizedBox(height: 16),
Text(
'Filament nicht gefunden',
style: TextStyle(fontSize: 18, color: Colors.grey.shade600),
),
],
),
);
}
return CustomScrollView(
slivers: [
// App Bar
SliverAppBar(
expandedHeight: 0,
floating: true,
pinned: true,
backgroundColor: Colors.white,
elevation: 0,
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.grey.shade800),
onPressed: () => Get.back(),
),
actions: [
IconButton(
icon: Icon(Icons.share, color: Colors.grey.shade800),
onPressed: () {
// Share functionality
},
),
],
),
// Content
SliverToBoxAdapter(
child: Column(
children: [
// Header with color and name
DetailHeader(
name: filament.name,
type: filament.type,
color: filament.color,
),
SizedBox(height: 24),
// Usage Progress Ring
Container(
margin: EdgeInsets.symmetric(horizontal: 16),
padding: EdgeInsets.all(24),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.white, Colors.blue.shade50],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(24),
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(5),
blurRadius: 15,
offset: Offset(0, 5),
),
],
),
child: Column(
children: [
Text(
'Verbrauch',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: Colors.grey.shade700,
),
),
SizedBox(height: 20),
ProgressRing(
progress: controller.usagePercentage / 100,
size: 140,
strokeWidth: 14,
backgroundColor: Colors.grey.shade300,
progressColor: Colors.blue,
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildStatItem(
'Verwendet',
'${filament.weightUsed.toStringAsFixed(0)}g',
Colors.orange,
),
Container(
width: 1,
height: 40,
color: Colors.grey.shade300,
),
_buildStatItem(
'Verbleibend',
'${controller.remainingWeight.toStringAsFixed(0)}g',
Colors.green,
),
],
),
],
),
),
SizedBox(height: 24),
// Info Grid
Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Details',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.grey.shade800,
),
),
SizedBox(height: 16),
GridView.count(
crossAxisCount: 2,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
mainAxisSpacing: 12,
crossAxisSpacing: 12,
childAspectRatio: 1.6,
children: [
DetailInfoCard(
icon: Icons.scale,
label: 'Gesamtgewicht',
value: '${filament.weight.toStringAsFixed(0)}g',
color: Colors.blue,
),
DetailInfoCard(
icon: Icons.euro,
label: 'Preis',
value: '${filament.price.toStringAsFixed(2)}',
color: Colors.green,
),
if (filament.printingTemp != null)
DetailInfoCard(
icon: Icons.thermostat,
label: 'Drucktemperatur',
value: '${filament.printingTemp}°C',
color: Colors.orange,
),
if (filament.bedTemp != null)
DetailInfoCard(
icon: Icons.heat_pump,
label: 'Bett Temperatur',
value: '${filament.bedTemp}°C',
color: Colors.red,
),
if (filament.pices != null)
DetailInfoCard(
icon: Icons.inventory_2,
label: 'Anzahl Rollen',
value: '${filament.pices}',
color: Colors.purple,
),
if (filament.manufacturer != null)
DetailInfoCard(
icon: Icons.business,
label: 'Hersteller',
value: filament.manufacturer!,
color: Colors.indigo,
),
],
),
// Purchase Date
if (filament.purchaseDate != null) ...[
SizedBox(height: 12),
Container(
width: double.infinity,
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(5),
blurRadius: 10,
offset: Offset(0, 4),
),
],
),
child: Row(
children: [
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.teal.withAlpha(10),
borderRadius: BorderRadius.circular(12),
),
child: Icon(
Icons.calendar_today,
color: Colors.teal,
size: 24,
),
),
SizedBox(width: 12),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Kaufdatum',
style: TextStyle(
fontSize: 12,
color: Colors.grey.shade600,
fontWeight: FontWeight.w500,
),
),
SizedBox(height: 4),
Text(
filament.purchaseDate!,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.grey.shade800,
),
),
],
),
],
),
),
],
// Notes
if (filament.notes != null && filament.notes!.isNotEmpty) ...[
SizedBox(height: 24),
Text(
'Notizen',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.grey.shade800,
),
),
SizedBox(height: 12),
Container(
width: double.infinity,
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.amber.shade50,
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: Colors.amber.shade200,
width: 1,
),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.notes,
color: Colors.amber.shade700,
size: 24,
),
SizedBox(width: 12),
Expanded(
child: Text(
filament.notes!,
style: TextStyle(
fontSize: 15,
color: Colors.grey.shade800,
height: 1.5,
),
),
),
],
),
),
],
],
),
),
SizedBox(height: 32),
// Action Buttons
Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Row(
children: [
Expanded(
child: ActionButton(
icon: Icons.edit,
label: 'Bearbeiten',
color: Colors.blue,
onPressed: controller.toggleEdit,
),
),
SizedBox(width: 12),
Expanded(
child: ActionButton(
icon: Icons.delete,
label: 'Löschen',
color: Colors.red,
isOutlined: true,
onPressed: () {
_showDeleteDialog(context);
},
),
),
],
),
),
SizedBox(height: 32),
],
),
),
],
);
}),
);
}
Widget _buildStatItem(String label, String value, Color color) {
return Column(
children: [
Text(
label,
style: TextStyle(
fontSize: 13,
color: Colors.grey.shade600,
fontWeight: FontWeight.w500,
),
),
SizedBox(height: 6),
Text(
value,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: color,
),
),
],
);
}
void _showDeleteDialog(BuildContext context) {
Get.dialog(
AlertDialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
title: Row(
children: [
Icon(Icons.warning_amber_rounded, color: Colors.orange, size: 28),
SizedBox(width: 12),
Text('Filament löschen?'),
],
),
content: Text(
'Möchten Sie dieses Filament wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.',
style: TextStyle(fontSize: 15),
),
actions: [
TextButton(
onPressed: () => Get.back(),
child: Text(
'Abbrechen',
style: TextStyle(color: Colors.grey.shade600),
),
),
ElevatedButton(
onPressed: () {
Get.back();
controller.deleteFilament();
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
child: Text('Löschen'),
),
],
),
);
}
}

View File

@@ -0,0 +1,46 @@
import 'package:flutter/material.dart';
class ActionButton extends StatelessWidget {
final IconData icon;
final String label;
final Color color;
final VoidCallback onPressed;
final bool isOutlined;
const ActionButton({
super.key,
required this.icon,
required this.label,
required this.color,
required this.onPressed,
this.isOutlined = false,
});
@override
Widget build(BuildContext context) {
return ElevatedButton.icon(
onPressed: onPressed,
icon: Icon(icon, size: 20),
label: Text(
label,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
),
),
style: ElevatedButton.styleFrom(
backgroundColor: isOutlined ? Colors.white : color,
foregroundColor: isOutlined ? color : Colors.white,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 14),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
side: isOutlined
? BorderSide(color: color, width: 2)
: BorderSide.none,
),
elevation: isOutlined ? 0 : 3,
shadowColor: color.withAlpha(140),
),
);
}
}

View File

@@ -0,0 +1,104 @@
import 'package:flutter/material.dart';
class DetailHeader extends StatelessWidget {
final String name;
final String type;
final String color;
const DetailHeader({
super.key,
required this.name,
required this.type,
required this.color,
});
Color _getColorFromString(String colorName) {
final colorMap = {
'red': Colors.red,
'blue': Colors.blue,
'green': Colors.green,
'yellow': Colors.yellow,
'black': Colors.black,
'white': Colors.white,
'orange': Colors.orange,
'purple': Colors.purple,
'pink': Colors.pink,
'grey': Colors.grey,
'brown': Colors.brown,
};
return colorMap[colorName.toLowerCase()] ?? Colors.grey;
}
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(24),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
_getColorFromString(color).withAlpha(100),
_getColorFromString(color).withAlpha(50),
],
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(32),
bottomRight: Radius.circular(32),
),
),
child: Column(
children: [
// Color circle
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: _getColorFromString(color),
shape: BoxShape.circle,
border: Border.all(
color: Colors.white,
width: 4,
),
boxShadow: [
BoxShadow(
color: _getColorFromString(color).withAlpha(120),
blurRadius: 20,
spreadRadius: 5,
),
],
),
),
SizedBox(height: 16),
// Name
Text(
name,
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.grey.shade800,
),
textAlign: TextAlign.center,
),
SizedBox(height: 8),
// Type badge
Container(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 6),
decoration: BoxDecoration(
color: _getColorFromString(color).withAlpha(120),
borderRadius: BorderRadius.circular(20),
),
child: Text(
type,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: _getColorFromString(color).withAlpha(180),
),
),
),
],
),
);
}
}

View File

@@ -0,0 +1,76 @@
import 'package:flutter/material.dart';
class DetailInfoCard extends StatelessWidget {
final IconData icon;
final String label;
final String value;
final Color color;
const DetailInfoCard({
super.key,
required this.icon,
required this.label,
required this.value,
this.color = Colors.blue,
});
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(150),
blurRadius: 10,
offset: Offset(0, 4),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: color.withAlpha(10),
borderRadius: BorderRadius.circular(12),
),
child: Icon(icon, color: color, size: 24),
),
SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
label,
style: TextStyle(
fontSize: 12,
color: Colors.grey.shade600,
fontWeight: FontWeight.w500,
),
),
SizedBox(height: 4),
Text(
value,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.grey.shade800,
),
),
],
),
),
],
),
],
),
);
}
}

View File

@@ -27,6 +27,7 @@ class FilamentCard extends StatelessWidget {
'purple': Colors.purple,
'pink': Colors.pink,
'grey': Colors.grey,
'brown': Colors.brown,
};
return colorMap[colorName.toLowerCase()] ?? Colors.grey;
@@ -152,7 +153,7 @@ class FilamentCard extends StatelessWidget {
),
_buildDetailChip(
icon: Icons.scale,
label: '${filament.weight}g',
label: '${filament.weight - filament.weightUsed}g',
color: Colors.green,
),
_buildDetailChip(
@@ -166,6 +167,11 @@ class FilamentCard extends StatelessWidget {
label: '${filament.pices} Stk.',
color: Colors.purple,
),
_buildDetailChip(
icon: Icons.scale,
label: '${filament.weightUsed}g',
color: Colors.red,
),
],
),

View File

@@ -0,0 +1,102 @@
import 'dart:math';
import 'package:flutter/material.dart';
class ProgressRing extends StatelessWidget {
final double progress; // 0.0 to 1.0
final double size;
final double strokeWidth;
final Color backgroundColor;
final Color progressColor;
final Widget? child;
const ProgressRing({
super.key,
required this.progress,
this.size = 120,
this.strokeWidth = 12,
this.backgroundColor = Colors.grey,
this.progressColor = Colors.blue,
this.child,
});
@override
Widget build(BuildContext context) {
return SizedBox(
width: size,
height: size,
child: CustomPaint(
painter: _ProgressRingPainter(
progress: progress,
strokeWidth: strokeWidth,
backgroundColor: backgroundColor,
progressColor: progressColor,
),
child: child != null
? Center(child: child)
: Center(
child: Text(
'${(progress * 100).toStringAsFixed(0)}%',
style: TextStyle(
fontSize: size / 5,
fontWeight: FontWeight.bold,
color: Colors.grey.shade800,
),
),
),
),
);
}
}
class _ProgressRingPainter extends CustomPainter {
final double progress;
final double strokeWidth;
final Color backgroundColor;
final Color progressColor;
_ProgressRingPainter({
required this.progress,
required this.strokeWidth,
required this.backgroundColor,
required this.progressColor,
});
@override
void paint(Canvas canvas, Size size) {
final center = Offset(size.width / 2, size.height / 2);
final radius = (size.width - strokeWidth) / 2;
// Background circle
final backgroundPaint = Paint()
..color = backgroundColor.withAlpha(120)
..style = PaintingStyle.stroke
..strokeWidth = strokeWidth
..strokeCap = StrokeCap.round;
canvas.drawCircle(center, radius, backgroundPaint);
// Progress arc
final progressPaint = Paint()
..shader = LinearGradient(
colors: [
progressColor,
progressColor.withAlpha(170),
],
).createShader(Rect.fromCircle(center: center, radius: radius))
..style = PaintingStyle.stroke
..strokeWidth = strokeWidth
..strokeCap = StrokeCap.round;
final sweepAngle = 2 * pi * progress;
canvas.drawArc(
Rect.fromCircle(center: center, radius: radius),
-pi / 2, // Start from top
sweepAngle,
false,
progressPaint,
);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}