From f37d3872cbc5734e61a535278c35f7be207f35a1 Mon Sep 17 00:00:00 2001 From: Niklas Date: Tue, 8 Oct 2024 22:53:57 +0200 Subject: [PATCH] Event-Card soweit angepasst. --- lib/screens/detail_widget.dart | 4 +- lib/screens/home.dart | 4 +- lib/screens/subheader_Datepicker.dart | 806 +++++++++++++++++++++++--- 3 files changed, 737 insertions(+), 77 deletions(-) diff --git a/lib/screens/detail_widget.dart b/lib/screens/detail_widget.dart index daedec4..f785dba 100644 --- a/lib/screens/detail_widget.dart +++ b/lib/screens/detail_widget.dart @@ -8,8 +8,9 @@ import 'package:Emma_home/utils/data.dart'; class Frame28 extends StatelessWidget { final List> events; final Color color; + final MediaQueryData screen_size; - const Frame28({Key? key, required this.events, required this.color}) + const Frame28({Key? key, required this.events, required this.color, required this.screen_size}) : super(key: key); /* void initState() { @@ -97,6 +98,7 @@ class Frame28 extends StatelessWidget { extractTime24h(events[index]['time'][0]['start_date']), color: extractColor(events[index]['main_category_id']), + screen_size: screen_size, ); }, childCount: events.length, diff --git a/lib/screens/home.dart b/lib/screens/home.dart index 703c288..12ce2e6 100644 --- a/lib/screens/home.dart +++ b/lib/screens/home.dart @@ -88,7 +88,8 @@ class HomePage extends StatelessWidget { /*24 is for notification bar on Android*/ final double itemHeight = (size.height - kToolbarHeight - 140) / 5; final double itemWidth = size.width / 2.3; - + MediaQueryData queryData; + queryData = MediaQuery.of(context); var appBar = AppBar( leading: SizedBox( height: 60, @@ -204,6 +205,7 @@ class HomePage extends StatelessWidget { builder: (context) => Frame28( events: events2, color: Data.recipes[index].color, + screen_size: queryData, ))); }, child: diff --git a/lib/screens/subheader_Datepicker.dart b/lib/screens/subheader_Datepicker.dart index 912082a..2648dae 100644 --- a/lib/screens/subheader_Datepicker.dart +++ b/lib/screens/subheader_Datepicker.dart @@ -184,11 +184,14 @@ class HeaderSection extends StatelessWidget { } class EventCard2Section extends StatelessWidget { + + final String title; final String description; final String location; final String start_time; final Color color; + final MediaQueryData screen_size; const EventCard2Section({ Key? key, @@ -197,22 +200,15 @@ class EventCard2Section extends StatelessWidget { required this.location, required this.start_time, required this.color, + required this.screen_size, }) : super(key: key); @override Widget build(BuildContext context) { return Container( - width: 379, - height: 120, - margin: new EdgeInsets.fromLTRB(20.0, 0, 0.0, 8.0), - child: Stack( - children: [ - Positioned( - left: 0, - top: 0, - child: Container( - width: 360, - height: 110, - decoration: BoxDecoration( + width: (screen_size.size.width-40), + height: 107, + margin: new EdgeInsets.fromLTRB(20.0, 0, 20.0, 20.0), + decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(10), border: Border( @@ -228,23 +224,23 @@ class EventCard2Section extends StatelessWidget { offset: Offset(0, 10), spreadRadius: 0, ) - ], - ), - ), - ), + ],), + child: Stack( + children: [ Positioned( - left: 230, - top: 1, + right: 0, + top: 0, child: Image.asset( 'assets/images/Vector01.png', // Pfad zum Bild height: 110, // Höhe des Bildes width: 130, // Breite des Bildes ), ), + //Bookmark Button Positioned( // Bookmark Button - left: 320, - top: 12, + right: 14, + top: 8, child: Container( width: 32, height: 32, @@ -257,33 +253,105 @@ class EventCard2Section extends StatelessWidget { padding: EdgeInsets.zero, // Entfernt zusätzlichen Abstand icon: Icon(Icons.bookmark_border_outlined), color: Colors.white, // Icon-Farbe - iconSize: 16, // Größe des Icons + iconSize: 19, // Größe des Icons onPressed: () { // Aktion beim Drücken des Buttons }, ), ), ), + // Title + Location Positioned( //Location - left: 10, - top: 14, - child: SizedBox( - //width: 55, - //height: 24, - child: Text( + left: 12, + top: 8, + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + title, + style: TextStyle( + color: Color(0xFF0A0A0A), + fontSize: 18, + fontFamily: 'Inter', + fontWeight: FontWeight.w400, + height: 1.5, + ), + ), + SizedBox( + width:(screen_size.size.width-40)-130, + height:24, + child:Text( location, style: TextStyle( - color: Color(0xFF0A0A0A), - fontSize: 18, - fontFamily: 'Inter', - fontWeight: FontWeight.w800, - height: 0, - ), + color: Color(0xFF0A0A0A), + fontSize: 18, + fontFamily: 'Inter', + fontWeight: FontWeight.w800, + height: 1.2, + ), + ),), + Text.rich( + TextSpan( + text: 'Beginn: ', // Standard-Text + style: TextStyle( + color: Color(0xFF0A0A0A), + fontSize: 12, + fontFamily: 'Inter', + height: 1.8, + fontWeight: FontWeight.w200, // Light weight + ), + children: [ + TextSpan( + text: start_time, // Variabler Text + style: TextStyle( + fontWeight: FontWeight.w800, // Bold + ), + ), + ], + ), +), + + /* Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SizedBox( + width: 60, + height: 44.40, + child:Text( + 'Beginn: ', + style: TextStyle( + color: Color(0xFF0A0A0A), + fontSize: 12, + fontFamily: 'Inter', + fontWeight: FontWeight.w200, + height: 16/12, + ), + ), ), - ), - Positioned( + Text( + start_time, + style: TextStyle( + color: Color(0xFF0A0A0A), + fontSize: 12, + fontFamily: 'Inter', + fontWeight: FontWeight.w800, + height: 16/12, + ), + ), + + ]), */ + + + ], + ),), + //Title + /* Positioned( //Title left: 92, top: 14, @@ -294,14 +362,15 @@ class EventCard2Section extends StatelessWidget { fontSize: 18, fontFamily: 'Inter', fontWeight: FontWeight.w400, - height: 0, - ), + height: 0.07, + ), ), - ), + ), */ + //Description Positioned( //Description - left: 10, - top: 90, + left: 12, + bottom: 8, child: SizedBox( //width: 196, //height: 15, @@ -311,56 +380,34 @@ class EventCard2Section extends StatelessWidget { color: Color(0xFF0A0A0A), fontSize: 12, fontFamily: 'Inter', - fontWeight: FontWeight.w400, - height: 0, + fontWeight: FontWeight.w200, + height: 16/12, ), ), ), ), - Positioned( + //Start time + /*Positioned( //Start time left: 10, top: 70, child: SizedBox( width: 72.79, height: 44.40, - child: Text.rich(TextSpan(children: [ - TextSpan( - text: start_time, - style: TextStyle( - color: Color(0xFF0A0A0A), - fontSize: 18, - fontFamily: 'Inter', - fontWeight: FontWeight.w800, - height: 0.06, - ), - ), - ])))), - Positioned( - //Text Beginn - left: 10, - top: 45, - child: SizedBox( - width: 72.79, - height: 44.40, - child: Text.rich( - TextSpan( - children: [ - TextSpan( - text: 'Beginn\n', + child: + Text( + start_time, style: TextStyle( color: Color(0xFF0A0A0A), fontSize: 12, fontFamily: 'Inter', - fontWeight: FontWeight.w200, - height: 0.14, - ), + fontWeight: FontWeight.w800, + height: 16/12, + ), ), - ], - ), - ), - ), - ), + )),*/ + //Text Beginn + ], ), ); @@ -860,3 +907,612 @@ class MusikHeader extends StatelessWidget { ); } } + +class CardGenre extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Column( + children: [ + Container( + width: 368, + height: 121, + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox( + width: double.infinity, + child: Text( + 'Heute', + style: TextStyle( + color: Color(0xFF171717), + fontSize: 12, + fontFamily: 'Inter', + fontWeight: FontWeight.w600, + height: 0.11, + ), + ), + ), + Container( + width: double.infinity, + padding: const EdgeInsets.only(left: 12), + decoration: ShapeDecoration( + color: Colors.white, + shape: RoundedRectangleBorder( + side: BorderSide( + width: 1, + strokeAlign: BorderSide.strokeAlignOutside, + color: Color(0xFFDADADA), + ), + borderRadius: BorderRadius.circular(10), + ), + shadows: [ + BoxShadow( + color: Color(0xFFF8AB14), + blurRadius: 0, + offset: Offset(0, 10), + spreadRadius: 0, + ) + ], + ), + child: Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Container( + padding: const EdgeInsets.only(bottom: 8), + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Eventname', + style: TextStyle( + color: Color(0xFF0A0A0A), + fontSize: 18, + fontFamily: 'Inter', + fontWeight: FontWeight.w800, + height: 0.08, + ), + ), + const SizedBox(height: 4), + Container( + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + width: 226, + child: Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox( + width: 83, + height: 24, + child: Text( + 'Location', + style: TextStyle( + color: Color(0xFF0A0A0A), + fontSize: 18, + fontFamily: 'Inter', + fontWeight: FontWeight.w400, + height: 0.07, + ), + ), + ), + const SizedBox(width: 24), + Container( + height: 20, + child: Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SizedBox( + width: 179, + height: 20, + child: Text.rich( + TextSpan( + children: [ + TextSpan( + text: 'Start: ', + style: TextStyle( + color: Color(0xFF0A0A0A), + fontSize: 18, + fontFamily: 'Inter', + fontWeight: FontWeight.w200, + height: 0.08, + ), + ), + TextSpan( + text: '20:30', + style: TextStyle( + color: Color(0xFF0A0A0A), + fontSize: 18, + fontFamily: 'Inter', + fontWeight: FontWeight.w800, + height: 0.08, + ), + ), + ], + ), + ), + ), + ], + ), + ), + ], + ), + ), + ], + ), + ), + const SizedBox(height: 4), + SizedBox( + width: 226, + height: 15, + child: Text( + 'Beschreibung in sehr kurzer Form hier...', + style: TextStyle( + color: Color(0xFF0A0A0A), + fontSize: 12, + fontFamily: 'Inter', + fontWeight: FontWeight.w200, + height: 0.11, + ), + ), + ), + ], + ), + ), + Container( + width: 32, + child: Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + width: 32, + height: 32, + child: Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + width: 32, + height: 32, + decoration: ShapeDecoration( + color: Colors.white.withOpacity(0.800000011920929), + shape: OvalBorder( + side: BorderSide(width: 1, color: Color(0xFFABA9A9)), + ), + ), + ), + Container( + width: 18, + height: 19, + clipBehavior: Clip.antiAlias, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10), + ), + child: FlutterLogo(), + ), + ], + ), + ), + ], + ), + ), + ], + ), + ), + ], + ), + ), + ], + ); + } +} + + +class CardGenre_temp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Column( + children: [ + Container( + width: 368, + height: 121, + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox( + width: double.infinity, + child: Text( + 'Heute', + style: TextStyle( + color: Color(0xFF171717), + fontSize: 12, + fontFamily: 'Inter', + fontWeight: FontWeight.w600, + height: 0.11, + ), + ), + ), + Container( + width: double.infinity, + padding: const EdgeInsets.only(left: 12), + decoration: ShapeDecoration( + color: Colors.white, + shape: RoundedRectangleBorder( + side: BorderSide( + width: 1, + strokeAlign: BorderSide.strokeAlignOutside, + color: Color(0xFFDADADA), + ), + borderRadius: BorderRadius.circular(10), + ), + shadows: [ + + ], + ), + child: Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Container( + padding: const EdgeInsets.only(bottom: 8), + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Eventname', + style: TextStyle( + color: Color(0xFF0A0A0A), + fontSize: 18, + fontFamily: 'Inter', + fontWeight: FontWeight.w800, + height: 0.08, + ), + ), + const SizedBox(height: 4), + Container( + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + width: 226, + child: Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox( + width: 83, + height: 24, + child: Text( + 'Location', + style: TextStyle( + color: Color(0xFF0A0A0A), + fontSize: 18, + fontFamily: 'Inter', + fontWeight: FontWeight.w400, + height: 0.07, + ), + ), + ), + const SizedBox(width: 24), + Container( + height: 20, + child: Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SizedBox( + width: 179, + height: 20, + child: Text.rich( + TextSpan( + children: [ + TextSpan( + text: 'Start: ', + style: TextStyle( + color: Color(0xFF0A0A0A), + fontSize: 18, + fontFamily: 'Inter', + fontWeight: FontWeight.w200, + height: 0.08, + ), + ), + TextSpan( + text: '20:30', + style: TextStyle( + color: Color(0xFF0A0A0A), + fontSize: 18, + fontFamily: 'Inter', + fontWeight: FontWeight.w800, + height: 0.08, + ), + ), + ], + ), + ), + ), + ], + ), + ), + ], + ), + ), + ], + ), + ), + const SizedBox(height: 4), + SizedBox( + width: 226, + height: 15, + child: Text( + 'Beschreibung in sehr kurzer Form hier...', + style: TextStyle( + color: Color(0xFF0A0A0A), + fontSize: 12, + fontFamily: 'Inter', + fontWeight: FontWeight.w200, + height: 0.11, + ), + ), + ), + ], + ), + ), + Container( + width: 32, + child: Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + width: 32, + height: 32, + child: Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + width: 32, + height: 32, + decoration: ShapeDecoration( + color: Colors.white.withOpacity(0.800000011920929), + shape: OvalBorder( + side: BorderSide(width: 1, color: Color(0xFFABA9A9)), + ), + ), + ), + Container( + width: 18, + height: 19, + clipBehavior: Clip.antiAlias, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10), + ), + child: FlutterLogo(), + ), + ], + ), + ), + ], + ), + ), + ], + ), + ), + ], + ), + ), + ], + ); + } +} + +class Event_Card extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Column( + children: [ + Container( + width: 368, + height: 107.26, + padding: const EdgeInsets.only(left: 12), + decoration: ShapeDecoration( + color: Colors.white, + shape: RoundedRectangleBorder( + side: BorderSide( + width: 1, + strokeAlign: BorderSide.strokeAlignOutside, + color: Color(0xFFDADADA), + ), + borderRadius: BorderRadius.circular(9), + ), + shadows: [ + BoxShadow( + color: Color(0xFFF8AB14), + blurRadius: 0, + offset: Offset(0, 10), + spreadRadius: 0, + ) + ], + ), + child: Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Container( + padding: const EdgeInsets.symmetric(vertical: 8), + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + width: double.infinity, + height: 48, + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Eventname kann lang sein', + style: TextStyle( + color: Color(0xFF0A0A0A), + fontSize: 18, + fontFamily: 'Inter', + fontWeight: FontWeight.w400, + height: 0.07, + ), + ), + SizedBox( + width: 83, + height: 24, + child: Text( + 'Location', + style: TextStyle( + color: Color(0xFF0A0A0A), + fontSize: 18, + fontFamily: 'Inter', + fontWeight: FontWeight.w800, + height: 0.06, + ), + ), + ), + ], + ), + ), + Container( + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text.rich( + TextSpan( + children: [ + TextSpan( + text: 'Start:', + style: TextStyle( + color: Color(0xFF0A0A0A), + fontSize: 12, + fontFamily: 'Inter', + fontWeight: FontWeight.w200, + height: 0.11, + ), + ), + TextSpan( + text: ' ', + style: TextStyle( + color: Color(0xFF0A0A0A), + fontSize: 18, + fontFamily: 'Inter', + fontWeight: FontWeight.w200, + height: 0.08, + ), + ), + TextSpan( + text: '20:30', + style: TextStyle( + color: Color(0xFF0A0A0A), + fontSize: 12, + fontFamily: 'Inter', + fontWeight: FontWeight.w800, + height: 0.11, + ), + ), + ], + ), + ), + SizedBox( + width: 226, + height: 15, + child: Text( + 'Beschreibung in sehr kurzer Form hier...', + style: TextStyle( + color: Color(0xFF0A0A0A), + fontSize: 12, + fontFamily: 'Inter', + fontWeight: FontWeight.w200, + height: 0.11, + ), + ), + ), + ], + ), + ), + ], + ), + ), + Container( + width: 32, + child: Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + width: 32, + height: 32, + child: Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + width: 32, + height: 32, + decoration: ShapeDecoration( + color: Colors.white.withOpacity(0.800000011920929), + shape: OvalBorder( + side: BorderSide(width: 1, color: Color(0xFFABA9A9)), + ), + ), + ), + Container( + width: 18, + height: 19, + clipBehavior: Clip.antiAlias, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10), + ), + child: FlutterLogo(), + ), + ], + ), + ), + ], + ), + ), + ], + ), + ), + ], + ); + } +} \ No newline at end of file