KonectarApp/lib/widgets/gridview.dart

343 lines
12 KiB
Dart

import 'package:avatar_stack/avatar_stack.dart';
import 'package:avatar_stack/positions.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:konectar_events/utils/util.dart';
import 'package:konectar_events/view/eventstab.dart';
import 'package:konectar_events/widgets/customtextfield.dart';
import 'package:konectar_events/widgets/responsive_utils.dart';
import 'package:konectar_events/widgets/typography.dart';
class EventsGrid extends StatelessWidget {
final Color iconColor;
VoidCallback addtoFav;
EventsGrid({super.key, required this.iconColor, required this.addtoFav});
@override
Widget build(BuildContext context) {
final textTheme = Theme.of(context)
.textTheme
.apply(displayColor: Theme.of(context).colorScheme.onSurface);
// Set the default number of columns to 3.
int columnsCount = 2;
// Define the icon size based on the screen width
// Use the ResponsiveUtils class to determine the device's screen size.
if (ResponsiveUtils.isMobile(context)) {
columnsCount = 1;
} else if (ResponsiveUtils.isDesktop(context)) {
columnsCount = 3;
}
// Build the grid view using the number of columns.
return Expanded(
child: GridView.builder(
// Set padding and spacing between cards.
padding: const EdgeInsets.symmetric(vertical: 5),
scrollDirection: Axis.vertical,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
// Set the number of columns based on the device's screen size.
crossAxisCount: columnsCount,
// Set the aspect ratio of each card.
// childAspectRatio: isTablet ? 2 : 2,
// crossAxisSpacing: isTablet ? 30 : 20,
// mainAxisSpacing: isTablet ? 40 : 20,
childAspectRatio: isTablet ? 2 : 2.2,
crossAxisSpacing: isTablet ? 30 : 1,
mainAxisSpacing: isTablet ? 40 : 4,
),
// Set the number of items in the grid view.
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
// Build each card in the grid view.
return InkWell(
// onTap: () {
// Navigator.of(context).push(MaterialPageRoute(
// builder: (context) => EventsTab(),
// ));
// },
child: Card(child: buildCardView(context)));
},
// Set the grid view to shrink wrap its contents.
shrinkWrap: true,
// Disable scrolling in the grid view.
// physics: const NeverScrollableScrollPhysics(),
),
);
}
buildCardView(BuildContext context) {
double height = isTablet
? MediaQuery.of(context).size.height * 0.35
: MediaQuery.of(context).size.height * 0.65;
return Container(
decoration: BoxDecoration(
// color: Color.fromARGB(179, 248, 238, 238),
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(20))),
height: height,
padding: isTablet
? EdgeInsets.symmetric(horizontal: 8.0, vertical: 2.0)
: EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
height: isTablet ? 1 : 3,
),
Container(
// height: isTablet ? height * 0.50 : height * 0.30,
padding: const EdgeInsets.only(top: 5.0),
width: double.maxFinite,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'2024 Hematology/Oncology Pharmacy Association Annual Conference (HOPA)',
style: TextStyle(
// decoration: TextDecoration.underline,
// decorationColor: Colors.blue,
color: Colors.black,
//fontWeight: FontWeight.bold,
fontSize: isTablet ? 22 : 18,
fontFamily: "SourceSerif",
),
maxLines: isTablet ? 3 : 3,
softWrap: true,
overflow: TextOverflow.ellipsis,
),
SizedBox(
height: 20.0,
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
RichText(
text: TextSpan(
children: [
WidgetSpan(
child: Icon(Icons.location_on, size: 18),
),
TextSpan(
text: 'Tampa,Florida,United States',
style: TextStyle(
color: Colors.black,
fontStyle: FontStyle.italic,
fontFamily: "SourceSerif",
fontSize: isTablet ? 20 : 16),
),
],
),
),
SizedBox(
height: 5.0,
),
RichText(
text: TextSpan(
children: [
WidgetSpan(
child: Icon(Icons.calendar_month, size: 18),
),
TextSpan(
text: ' 06-10-2024 - 10-10-2024',
style: TextStyle(
color: Colors.black,
fontStyle: FontStyle.italic,
fontFamily: "SourceSerif",
fontSize: isTablet ? 20 : 16),
),
],
),
),
],
),
Align(
alignment: Alignment.bottomRight,
child: SizedBox(
height: 30,
child: OutlinedButton(
onPressed: () => addtoFav,
child: Icon(
Icons.favorite_border_outlined,
size: isTablet ? 20 : 18,
color: iconColor,
),
style: OutlinedButton.styleFrom(
shape: CircleBorder(),
),
),
),
),
],
),
],
),
// Image.asset(
// "assets/images/events2.jpg",
// fit: BoxFit.cover,
// ),
),
// Divider(
// color: Colors.blueGrey,
// thickness: 2,
// height: 2,
// ),
// SizedBox(
// height: 5,
// ),
// Text(
// 'Organizer: Hematology/Oncology Pharmacy Association (HOPA)',
// style: TextStyle(
// color: Colors.black,
// fontStyle: FontStyle.italic,
// fontFamily: "SourceSerif",
// fontSize: isTablet ? 18 : 14),
// maxLines: 2,
// softWrap: true,
// overflow: TextOverflow.ellipsis,
// ),
// SizedBox(
// // height: 100,
// child: Padding(
// padding: const EdgeInsets.symmetric(vertical: 4.0),
// child: Column(
// mainAxisAlignment: MainAxisAlignment.start,
// crossAxisAlignment: CrossAxisAlignment.start,
// children: [
// Row(
// children: [],
// ),
// RichText(
// text: TextSpan(
// children: [
// WidgetSpan(
// child: SizedBox(
// width: 80,
// height: 18,
// child: WidgetStack(
// stackedWidgets: [
// for (var n = 0; n < 5; n++)
// CircleAvatar(
// child: Icon(
// Icons.person,
// size: 14,
// color: Colors.blueGrey[300],
// ))
// ],
// positions: RestrictedPositions(
// maxCoverage: 0.3,
// minCoverage: 0.4,
// ),
// buildInfoWidget: (surplus) {
// return Center(
// child: Text(
// '+$surplus',
// style: Theme.of(context).textTheme.headline5,
// ));
// },
// ),
// ),
// ),
// TextSpan(
// text: '5',
// style: TextStyle(
// color: Colors.black,
// fontFamily: "SourceSerif",
// fontSize: 16),
// ),
// TextSpan(
// text: ' attendees',
// style: TextStyle(
// color: Colors.black,
// fontFamily: "SourceSerif",
// fontSize: 14),
// ),
// ],
// ),
// ),
// RichText(
// text: TextSpan(
// children: [
// WidgetSpan(
// child: SizedBox(
// width: 50,
// height: 18,
// child: WidgetStack(
// stackedWidgets: [
// for (var n = 0; n < 3; n++)
// CircleAvatar(
// child: Icon(
// Icons.person,
// size: 14,
// color: Colors.blueGrey[300],
// ))
// ],
// positions: RestrictedPositions(
// maxCoverage: 0.3,
// minCoverage: 0.4,
// ),
// buildInfoWidget: (surplus) {
// return Center(
// child: Text(
// '+$surplus',
// style: Theme.of(context).textTheme.headline5,
// ));
// },
// ),
// ),
// ),
// TextSpan(
// text: '3',
// style: TextStyle(
// color: Colors.black,
// fontFamily: "SourceSerif",
// fontSize: 16),
// ),
// TextSpan(
// text: ' client attendees',
// style: TextStyle(
// color: Colors.black,
// fontFamily: "SourceSerif",
// fontSize: 14),
// ),
// ],
// ),
// ),
// ],
// ),
// ),
// ),
// Row(
// children: [
// SizedBox(
// height: 30,
// child: OutlinedButton(
// onPressed: () {},
// child: Text('Add to My Events'),
// style: OutlinedButton.styleFrom(
// shape: StadiumBorder(),
// ),
// ),
// ),
// ],
// )
],
),
);
}
}