From f052852c686e363f412dcd118ff57a50515d0509 Mon Sep 17 00:00:00 2001 From: Thomas Fransolet Date: Thu, 22 Feb 2024 16:38:11 +0100 Subject: [PATCH] agenda color, clean + support youtube video --- lib/Screens/Agenda/event_list_item.dart | 2 +- lib/Screens/Agenda/event_popup.dart | 276 ++++++++++++++---------- lib/Screens/Agenda/month_filter.dart | 9 +- 3 files changed, 168 insertions(+), 119 deletions(-) diff --git a/lib/Screens/Agenda/event_list_item.dart b/lib/Screens/Agenda/event_list_item.dart index a703945..8efd60e 100644 --- a/lib/Screens/Agenda/event_list_item.dart +++ b/lib/Screens/Agenda/event_list_item.dart @@ -81,7 +81,7 @@ class EventListItem extends StatelessWidget { bottom: 0.0, child: Container( decoration: const BoxDecoration( - color: kMainRed, // TODO + color: kTestSecondColor, // TODO borderRadius: BorderRadius.only( topLeft: Radius.circular(20.0), ), diff --git a/lib/Screens/Agenda/event_popup.dart b/lib/Screens/Agenda/event_popup.dart index eb57e1a..c83f940 100644 --- a/lib/Screens/Agenda/event_popup.dart +++ b/lib/Screens/Agenda/event_popup.dart @@ -4,9 +4,11 @@ import 'package:auto_size_text/auto_size_text.dart'; import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; +import 'package:flutter/widgets.dart'; import 'package:flutter_widget_from_html/flutter_widget_from_html.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart'; import 'package:tablet_app/Components/loading_common.dart'; +import 'package:tablet_app/Components/video_viewer_youtube.dart'; import 'package:tablet_app/Models/agenda.dart'; // Assurez-vous d'importer votre modèle d'agenda import 'package:intl/intl.dart'; import 'package:tablet_app/constants.dart'; @@ -49,9 +51,6 @@ class _EventPopupState extends State { Widget build(BuildContext context) { var dateToShow = widget.eventAgenda.dateFrom!.isAtSameMomentAs(widget.eventAgenda.dateTo!) ? "${formatter.format(widget.eventAgenda.dateFrom!)}": "${formatter.format(widget.eventAgenda.dateFrom!)} - ${formatter.format(widget.eventAgenda.dateTo!)}"; - - print(widget.eventAgenda.phone); - Size size = MediaQuery.of(context).size; if(!init) { @@ -66,7 +65,11 @@ class _EventPopupState extends State { ), contentPadding: EdgeInsets.zero, // title: Text(eventAgenda.name!), - content: SizedBox( + content: Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(20.0)), + color: kBackgroundColor, + ), height: size.height * 0.8, child: Stack( children: [ @@ -107,9 +110,12 @@ class _EventPopupState extends State { child: Container( child: Center( child: Container( + decoration: BoxDecoration( + border: Border(right: BorderSide(width: 0.05, color: kMainGrey)), + color: Colors.grey, + ), width: 225, height: size.height, - color: Colors.grey, child: CachedNetworkImage( imageUrl: widget.eventAgenda.image!, width: size.width, @@ -129,134 +135,176 @@ class _EventPopupState extends State { ) ), ): SizedBox(), - Padding( - padding: const EdgeInsets.only(left: 20, right: 10, bottom: 10), - child: Column( - children: [ - SizedBox( + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Padding( + padding: const EdgeInsets.all(8.0), + child: SizedBox( height: size.height * 0.11, - width: size.width * 0.45, + width: size.width * 0.7, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - AutoSizeText( - widget.eventAgenda.name!, - style: TextStyle(fontSize: 25), - maxFontSize: 25, + SizedBox( + height: size.height * 0.05, + child: AutoSizeText( + widget.eventAgenda.name!, + style: TextStyle(fontSize: 25), + maxFontSize: 25, + ), + ), + Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Padding( + padding: const EdgeInsets.only(top: 4.0, left: 2.0, right: 4.0, bottom: 6.0), + child: Icon(Icons.calendar_today_rounded, color: kTestSecondColor, size: 20), + ), + Padding( + padding: const EdgeInsets.all(2.0), + child: Text(dateToShow, style: TextStyle(fontSize: 20, color: kTestSecondColor, fontWeight: FontWeight.w500)), + ) + ], ), - Text('${dateToShow}', style: TextStyle(fontSize: 20, color: kMainGrey)), ], ), ), - Container( - height: size.height * 0.65, - width: size.width * 0.45, - color: Colors.grey, - child: SingleChildScrollView( + ), + Row( + children: [ + Padding( + padding: const EdgeInsets.only(left: 15), + child: Container( + height: size.height * 0.65, + width: size.width * 0.45, + decoration: BoxDecoration( + color: kBackgroundLight, + borderRadius: BorderRadius.all(Radius.circular(20.0)) + ), + child: Padding( + padding: const EdgeInsets.only(left: 20, right: 10, bottom: 10, top: 15), + child: Scrollbar( + thumbVisibility: true, + thickness: 2.0, + child: SingleChildScrollView( + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.start, + children: [ + HtmlWidget( + widget.eventAgenda.description!, + customStylesBuilder: (element) { + return {'text-align': 'left'}; + }, + textStyle: TextStyle(fontSize: kDescriptionSize), + ), + widget.eventAgenda.idVideoYoutube != null && widget.eventAgenda.idVideoYoutube!.isNotEmpty ? + Padding( + padding: const EdgeInsets.all(8.0), + child: SizedBox( + height: 250, + width: 350, + child: VideoViewerYoutube(videoUrl: "https://www.youtube.com/watch?v=${widget.eventAgenda.idVideoYoutube}", isAuto: false, webView: true) + ), + ) : + SizedBox(), + ], + ), + ), + ), + ), + ), + ), + ), + SizedBox( + width: size.width * 0.28, + height: size.height * 0.65, child: Padding( padding: const EdgeInsets.all(8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start, children: [ - HtmlWidget( - widget.eventAgenda.description!, - customStylesBuilder: (element) { - return {'text-align': 'left'}; - }, - textStyle: TextStyle(fontSize: kDescriptionSize), + widget.eventAgenda.address!.lat != null && widget.eventAgenda.address!.lng != null ? + SizedBox( + width: size.width * 0.28, + height: size.height * 0.2, + child: GoogleMap( + mapToolbarEnabled: false, + initialCameraPosition: CameraPosition( + target: LatLng(double.parse(widget.eventAgenda.address!.lat!.toString()), double.parse(widget.eventAgenda.address!.lng!.toString())), + zoom: 16, + ), + onMapCreated: (GoogleMapController controller) { + _controller.complete(controller); + }, + markers: markers, + ), + ): SizedBox(), + SizedBox( + width: size.width * 0.28, + height: size.height * 0.35, + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + widget.eventAgenda.address!.address != null && widget.eventAgenda.address!.address!.isNotEmpty ? Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Icon(Icons.location_on, size: 13), + Padding( + padding: const EdgeInsets.all(4.0), + child: SizedBox( + width: size.width*0.25, + child: AutoSizeText(widget.eventAgenda.address!.address!, style: TextStyle(fontSize: 12), maxLines: 3) + ), + ) + ], + ): SizedBox(), + widget.eventAgenda.phone != null && widget.eventAgenda.phone!.isNotEmpty ? Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Icon(Icons.phone, size: 13), + Padding( + padding: const EdgeInsets.all(4.0), + child: Text(widget.eventAgenda.phone!, style: TextStyle(fontSize: 12)), + ) + ], + ): SizedBox(), + widget.eventAgenda.email != null && widget.eventAgenda.email!.isNotEmpty ? Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Icon(Icons.email, size: 13), + Padding( + padding: const EdgeInsets.all(4.0), + child: Text(widget.eventAgenda.email!, style: TextStyle(fontSize: 12)), + ) + ], + ): SizedBox(), + widget.eventAgenda.website != null && widget.eventAgenda.website!.isNotEmpty ? Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Icon(Icons.public, size: 13), + Padding( + padding: const EdgeInsets.all(4.0), + child: Text(widget.eventAgenda.website!, style: TextStyle(fontSize: 12)), + ) + ], + ): SizedBox(), + ], + ), ), - widget.eventAgenda.idVideoYoutube != null && widget.eventAgenda.idVideoYoutube!.isNotEmpty ? - Text('TODO YOUTUBE VIDEO : ${widget.eventAgenda.idVideoYoutube}') : Text(""), ], ), ), - ), - ), - ], - ), - ), - SizedBox( - width: size.width * 0.28, - height: size.height * 0.6, - child: Padding( - padding: const EdgeInsets.all(8.0), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: MainAxisAlignment.start, - children: [ - widget.eventAgenda.address!.lat != null && widget.eventAgenda.address!.lng != null ? - SizedBox( - width: size.width * 0.28, - height: size.height * 0.2, - child: GoogleMap( - mapToolbarEnabled: false, - initialCameraPosition: CameraPosition( - target: LatLng(double.parse(widget.eventAgenda.address!.lat!.toString()), double.parse(widget.eventAgenda.address!.lng!.toString())), - zoom: 16, - ), - onMapCreated: (GoogleMapController controller) { - _controller.complete(controller); - }, - markers: markers, - ), - ): SizedBox(), - SizedBox( - width: size.width * 0.28, - height: size.height * 0.35, - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - widget.eventAgenda.address!.address != null && widget.eventAgenda.address!.address!.isNotEmpty ? Row( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Icon(Icons.location_on, size: 13), - Padding( - padding: const EdgeInsets.all(4.0), - child: SizedBox( - width: size.width*0.25, - child: AutoSizeText(widget.eventAgenda.address!.address!, style: TextStyle(fontSize: 12), maxLines: 3) - ), - ) - ], - ): SizedBox(), - widget.eventAgenda.phone != null && widget.eventAgenda.phone!.isNotEmpty ? Row( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Icon(Icons.phone, size: 13), - Padding( - padding: const EdgeInsets.all(4.0), - child: Text(widget.eventAgenda.phone!, style: TextStyle(fontSize: 12)), - ) - ], - ): SizedBox(), - widget.eventAgenda.email != null && widget.eventAgenda.email!.isNotEmpty ? Row( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Icon(Icons.email, size: 13), - Padding( - padding: const EdgeInsets.all(4.0), - child: Text(widget.eventAgenda.email!, style: TextStyle(fontSize: 12)), - ) - ], - ): SizedBox(), - widget.eventAgenda.website != null && widget.eventAgenda.website!.isNotEmpty ? Row( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Icon(Icons.public, size: 13), - Padding( - padding: const EdgeInsets.all(4.0), - child: Text(widget.eventAgenda.website!, style: TextStyle(fontSize: 12)), - ) - ], - ): SizedBox(), - ], - ), - ), + ) ], - ), - ), - ) + ) + ], + ), + ], ), ], diff --git a/lib/Screens/Agenda/month_filter.dart b/lib/Screens/Agenda/month_filter.dart index 975122f..8f69586 100644 --- a/lib/Screens/Agenda/month_filter.dart +++ b/lib/Screens/Agenda/month_filter.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:tablet_app/Models/agenda.dart'; +import 'package:tablet_app/constants.dart'; class MonthFilter extends StatefulWidget { final List events; @@ -45,7 +46,7 @@ class _MonthFilterState extends State { style: TextStyle( fontSize: 16.0, fontWeight: _selectedMonth == monthYear ? FontWeight.bold : FontWeight.normal, - color: _selectedMonth == monthYear ? Colors.red : null, + color: _selectedMonth == monthYear ? kTestSecondColor : null, ), ), onTap: () { @@ -54,7 +55,7 @@ class _MonthFilterState extends State { }); widget.onMonthSelected(filteredEvents); }, - tileColor: _selectedMonth == monthYear ? Colors.red : null, + tileColor: _selectedMonth == monthYear ? kTestSecondColor : null, ); } }, @@ -77,7 +78,7 @@ class _MonthFilterState extends State { style: TextStyle( fontSize: 16.0, fontWeight: _selectedMonth == null ? FontWeight.bold : FontWeight.normal, - color: _selectedMonth == null ? Colors.red : null, + color: _selectedMonth == null ? kTestSecondColor : null, ), ), onTap: () { @@ -86,7 +87,7 @@ class _MonthFilterState extends State { }); widget.onMonthSelected(widget.events); }, - tileColor: _selectedMonth == null ? Colors.red : null, + tileColor: _selectedMonth == null ? kTestSecondColor : null, ); }