Untitled
import 'dart:async'; import 'package:carousel_slider/carousel_slider.dart'; import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:flutter/material.dart'; import 'package:shimmer/shimmer.dart'; import '../constants/painter.dart'; class eventCarousel extends StatefulWidget { const eventCarousel({super.key}); @override State<eventCarousel> createState() => _eventCarouselState(); } class _eventCarouselState extends State<eventCarousel> { Timer? _timer; @override void dispose() { _timer?.cancel(); super.dispose(); } // Timer to refresh the countdown every second void _startCountdown() { _timer = Timer.periodic(const Duration(seconds: 1), (timer) { setState(() {}); }); } // Format the duration into days, hours, minutes, and seconds // Format the duration into days, hours, and minutes String _formatDuration(Duration duration) { final int days = duration.inDays; final int hours = duration.inHours.remainder(24); final int minutes = duration.inMinutes.remainder(60); return '${days.toString().padLeft(2, '0')}d : ${hours.toString().padLeft(2, '0')}h : ${minutes.toString().padLeft(2, '0')}m'; } @override void initState() { super.initState(); _fetchEvents(); _startCountdown(); } // Calculate the remaining time until the event Duration _calculateRemainingTime(DateTime eventTime) { final DateTime currentTime = DateTime.now(); return eventTime.difference(currentTime); } List<Map<String, dynamic>> events = []; void _fetchEvents() async { FirebaseFirestore.instance.collection('nights').get().then((querySnapshot) { List<Map<String, dynamic>> eventList = []; for (var doc in querySnapshot.docs) { Map<String, dynamic> data = doc.data(); eventList.add(data); } setState(() { events = eventList; }); }); } @override Widget build(BuildContext context) { double screenheight= MediaQuery.of(context).size.height; double screenwidth= MediaQuery.of(context).size.width; return Center( child: CarouselSlider( options: CarouselOptions( height: (450 / 949.3333333333334) * screenheight, // Carousel height autoPlay: false, // Auto slide enlargeCenterPage: true, // Zoom effect on the center item aspectRatio: 16 / 9, autoPlayInterval: Duration(seconds: 3), // Time between slides viewportFraction: 0.8, // Shows partial next/previous slides ), items: events.map((event) { final String artistName = event['artistName'] ?? 'Unknown Artist'; final String location = event['location'] ?? 'Unknown Location'; final String imageUrl = event['imageUrl'] ?? ''; final DateTime eventTime = (event['eventTime'] as Timestamp).toDate(); final Duration remainingTime = _calculateRemainingTime(eventTime); return Builder( builder: (BuildContext context) { return Column( children: [ Stack( children: [ Align( alignment: Alignment.bottomCenter, child: Container( height: (20/949.3333333333334)*screenheight, width: (140/448)*screenwidth, decoration: const BoxDecoration( color: Color(0xFF93E624), ), ), ), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ ClipPath( clipper: TriangleClipper(), child: Container( color: Colors.black, height: (20/949.3333333333334)*screenheight, width: (71/448)*screenwidth, ), ), ClipPath( clipper: TriangleClipperReverse(), child: Container( color: Colors.black, height: (20/949.3333333333334)*screenheight, width: (71/448)*screenwidth, ), ), ], ), ], ), Stack( children: [ Align( alignment: Alignment.center, child: Container( alignment: Alignment.center, height: (420/949.3333333333334)*screenheight, width: (350/448)*screenwidth, decoration: BoxDecoration( color: Colors.black, border: Border.all( color: const Color(0xFF93E624), width: 3, ), ),), ), Column( mainAxisAlignment: MainAxisAlignment.start, children: [ SizedBox( height: (20/949.3333333333334)*screenheight, ), Container( height: (200/949.3333333333334)*screenheight, width: (300/448)*screenwidth, decoration: const BoxDecoration( color: Color(0xFF93E624), ), child: ClipRRect( borderRadius: BorderRadius.circular(8), child: Image.network( imageUrl, fit: BoxFit.cover, loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) { if (loadingProgress == null) { return child; // When the image is fully loaded, return the image. } else { return Shimmer.fromColors( baseColor: Colors.grey[300]!, highlightColor: Colors.grey[100]!, child: Container( color: Colors.white, ), ); } }, errorBuilder: (BuildContext context, Object error, StackTrace? stackTrace) { return Shimmer.fromColors( baseColor: Colors.grey[300]!, highlightColor: Colors.grey[100]!, child: Container( width: 300, height: 290, color: Colors.white, child: const Icon( Icons.error, color: Colors.red, size: 50.0, ), ), ); }, ), ),), SizedBox( height: (10/949.3333333333334)*screenheight, ), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ ClipPath( clipper: LeftSideBoxClipper(), child: Container( alignment: Alignment.center, height: (190/949.3333333333334)*screenheight, width: (30/448)*screenwidth, color: const Color(0xFF93E624), child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ const SizedBox(height: 15), ClipPath( clipper: SlantedRectangleClipper(), child: Container( height: (24/949.3333333333334)*screenheight, width: (20/448)*screenwidth, color: Colors.black, ), ), ClipPath( clipper: SlantedRectangleClipper(), child: Container( height: (24/949.3333333333334)*screenheight, width: (20/448)*screenwidth, color: Colors.black, ), ), ClipPath( clipper: SlantedRectangleClipper(), child: Container( height: (24/949.3333333333334)*screenheight, width: (20/448)*screenwidth, color: Colors.black, ), ), ClipPath( clipper: SlantedRectangleClipper(), child: Container( height: (24/949.3333333333334)*screenheight, width: (20/448)*screenwidth, color: Colors.black, ), ), ClipPath( clipper: SlantedRectangleClipper(), child: Container( height: (24/949.3333333333334)*screenheight, width: (20/448)*screenwidth, color: Colors.black, ), ), ClipPath( clipper: SlantedRectangleClipper(), child: Container( height: (24/949.3333333333334)*screenheight, width: (20/448)*screenwidth, color: Colors.black, ), ), ClipPath( clipper: SlantedRectangleClipper(), child: Container( height: (24/949.3333333333334)*screenheight, width: (20/448)*screenwidth, color: Colors.black, ), ), ], ), ), ), Container( padding: const EdgeInsets.only(left: 10, right:10), height: (150/949.3333333333334)*screenheight, width: (285/448)*screenwidth, child: Column( children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( artistName, style: TextStyle( color: Colors.white, fontSize: 16, fontFamily: 'Robot-Invaders', fontWeight: FontWeight.w400, ), ), Text( location, style: TextStyle( color: Colors.white, fontSize: 16, fontFamily: 'Robot-Invaders', fontWeight: FontWeight.w400, ), ), ], ), const Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( 'Event', style: TextStyle( color: Color(0xFFA0A0A0), fontSize: 12, fontFamily: 'K2D-ExtraBold', ), ), Text( 'Location', style: TextStyle( color: Color(0xFFA0A0A0), fontSize: 12, fontFamily: 'K2D-ExtraBold', ), ), ], ), SizedBox(height: (40/949.3333333333334)*screenheight,), Stack( children: [ Align( alignment: Alignment.center, child: CustomPaint( size: const Size(196, 59), painter: RPSCustomPainter(), ), ), Align( alignment: Alignment.center, child: Column( children: [ const Text( 'Starts in', style: TextStyle( color: Colors.black, fontSize: 22, fontFamily: 'Robot-Invaders', fontWeight: FontWeight.w400, ), ), Text( remainingTime > Duration.zero ? _formatDuration(remainingTime) : 'Event Started', style: TextStyle( color: Colors.white, fontFamily: 'Robot-Invaders', fontSize: 18, fontWeight: FontWeight.w400, ), ), ], ), ), ], ), ], ) ), ClipPath( clipper: RightSideBoxClipper(), child: Container( decoration: const BoxDecoration( color: Color(0xFF93E624), ), alignment: Alignment.bottomRight, height: (190/949.3333333333334)*screenheight, width: (35/448)*screenwidth, child: ClipPath( clipper: RightSideStackedBoxClipper(), child: Container( height: (185/949.3333333333334)*screenheight, width: (31/448)*screenwidth, color: Colors.black, child:Column( children: [ SizedBox(height: (10/949.3333333333334)*screenheight,), Align( alignment: Alignment.center, child: ClipPath( clipper: RightSlantedRectangleClipper(), child: Container( height: (24/949.3333333333334)*screenheight, width: (17/448)*screenwidth, color: const Color(0xFF13EABF), ), ), ), Align( alignment: Alignment.center, child: ClipPath( clipper: RightSlantedRectangleClipper(), child: Container( height: (24/949.3333333333334)*screenheight, width: (17/448)*screenwidth, color: const Color(0xFF13EABF), ), ), ), Align( alignment: Alignment.center, child: ClipPath( clipper: RightSlantedRectangleClipper(), child: Container( height: (24/949.3333333333334)*screenheight, width: (17/448)*screenwidth, color: const Color(0xFF13EABF), ), ), ), Align( alignment: Alignment.center, child: ClipPath( clipper: RightSlantedRectangleClipper(), child: Container( height: (24/949.3333333333334)*screenheight, width: (17/448)*screenwidth, color: const Color(0xFF13EABF), ), ), ), Align( alignment: Alignment.center, child: ClipPath( clipper: RightSlantedRectangleClipper(), child: Container( height: (24/949.3333333333334)*screenheight, width: (17/448)*screenwidth, color: const Color(0xFF13EABF), ), ), ), Align( alignment: Alignment.center, child: ClipPath( clipper: RightSlantedRectangleClipper(), child: Container( height: (24/949.3333333333334)*screenheight, width: (17/448)*screenwidth, color: const Color(0xFF13EABF), ), ), ), ], ) ), ), ), ), ], ), ], ), Positioned( left: (283/949.3333333333334)*screenheight, top: (390/448)*screenwidth, child: ClipPath( clipper: BottomTriangleClipper(), child: Container( color: const Color(0xFF93E624), height: (35/949.3333333333334)*screenheight, width: (40/448)*screenwidth, ), ), ), Positioned( left: (286/949.3333333333334)*screenheight, top: (393/448)*screenwidth, child: ClipPath( clipper: StackedBottomTriangleClipper(), child: Container( height: (32/949.3333333333334)*screenheight, width: (40/448)*screenwidth, color: Colors.black, ), ),) ], ) ] ); }, ); }).toList(), ), ); } }
Leave a Comment