From 3af18cb884f209662c1a913d74ca01c4368cdb9a Mon Sep 17 00:00:00 2001 From: zaid_daoud Date: Wed, 8 Nov 2023 11:15:04 +0300 Subject: [PATCH] Working On Calendar --- .../pages/land_page/calendar_page.dart | 163 ++++++------------ .../calender_fragments/calendar_header.dart | 32 ++++ .../calender_days_card.dart | 40 +++++ .../calender_fragments/daily_fragment.dart | 9 +- .../calender_fragments/monthly_fragment.dart | 114 ++++++------ .../calender_fragments/weekly_fragment.dart | 61 ++++--- 6 files changed, 224 insertions(+), 195 deletions(-) create mode 100644 lib/new_views/pages/land_page/calender_fragments/calendar_header.dart create mode 100644 lib/new_views/pages/land_page/calender_fragments/calender_days_card.dart diff --git a/lib/new_views/pages/land_page/calendar_page.dart b/lib/new_views/pages/land_page/calendar_page.dart index b8635aab..22fd80e9 100644 --- a/lib/new_views/pages/land_page/calendar_page.dart +++ b/lib/new_views/pages/land_page/calendar_page.dart @@ -1,5 +1,4 @@ import 'package:flutter/material.dart'; -import 'package:table_calendar/table_calendar.dart'; import 'package:test_sa/extensions/int_extensions.dart'; import 'package:test_sa/extensions/text_extensions.dart'; import 'package:test_sa/extensions/widget_extensions.dart'; @@ -7,7 +6,7 @@ import 'package:test_sa/new_views/app_style/app_color.dart'; import 'package:test_sa/new_views/pages/land_page/calender_fragments/daily_fragment.dart'; import 'package:test_sa/new_views/pages/land_page/calender_fragments/weekly_fragment.dart'; -import '../../common_widgets/default_app_bar.dart'; +import 'calender_fragments/monthly_fragment.dart'; class CalendarPage extends StatefulWidget { const CalendarPage({Key key}) : super(key: key); @@ -28,121 +27,57 @@ class _CalendarPageState extends State with SingleTickerProviderSt @override Widget build(BuildContext context) { return Scaffold( - body: Column( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - // todo @sikander, hiding My shift view, later when they add data, then will us it. - SizedBox( - width: double.infinity, - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - "My Shift".heading5(context), - 8.height, - "Sunday to Thursday".bodyText(context), - "09:00 to 18:00".bodyText(context).custom(color: AppColor.neutral50), - ], - ).toShadowContainer, - ), - 16.height, - Container( - decoration: BoxDecoration(color: AppColor.neutral30, borderRadius: BorderRadius.circular(16)), - child: TabBar( - controller: _tabController, - padding: EdgeInsets.zero, - labelColor: AppColor.neutral60, - unselectedLabelColor: AppColor.neutral20, - indicatorPadding: const EdgeInsets.all(4), - indicator: BoxDecoration(color: Theme.of(context).cardColor, borderRadius: BorderRadius.circular(13)), - onTap: (index) { - setState(() {}); - }, - tabs: [ - Tab(text: "Monthly", height: 57.toScreenHeight), - Tab(text: "Weekly", height: 57.toScreenHeight), - Tab(text: "Daily", height: 57.toScreenHeight), - ], + body: SafeArea( + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + // todo @sikander, hiding My shift view, later when they add data, then will us it. + SizedBox( + width: double.infinity, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + "My Shift".heading5(context), + 8.height, + "Sunday to Thursday".bodyText(context), + "09:00 to 18:00".bodyText(context).custom(color: AppColor.neutral50), + ], + ).toShadowContainer, ), - ), - 8.height, - TabBarView( - physics: const NeverScrollableScrollPhysics(), - controller: _tabController, - children: [ - CalendarCard( - calendarFormat: CalendarFormat.month, - child: Column( - children: [ - 16.height, - Row( - children: [ - const CircleAvatar(backgroundColor: AppColor.primary40, radius: 8), - 8.width, - "My Requests".heading6(context), - ], - ), - 16.height, - Row( - children: [ - const CircleAvatar(backgroundColor: AppColor.green50, radius: 8), - 8.width, - "My Team Requests".heading6(context), - ], - ), - ], - ), - ), - WeeklyFragment(), - DailyFragment(), - ], - ).expanded, - ], - ), - ); - } -} - -class CalendarCard extends StatelessWidget { - final CalendarFormat calendarFormat; - final Widget child; - - const CalendarCard({this.calendarFormat, this.child, Key key}) : super(key: key); - - @override - Widget build(BuildContext context) { - return Card( - child: Column( - children: [ - SingleChildScrollView( - child: TableCalendar( - firstDay: DateTime.utc(2010, 10, 16), - lastDay: DateTime.utc(2030, 3, 14), - focusedDay: DateTime.now(), - calendarFormat: calendarFormat, - weekendDays: const [], - calendarStyle: CalendarStyle( - isTodayHighlighted: false, - cellMargin: const EdgeInsets.all(8), - cellPadding: EdgeInsets.zero, - defaultTextStyle: AppTextStyles.bodyText, - defaultDecoration: const BoxDecoration(shape: BoxShape.circle, color: AppColor.neutral30), - ), - headerStyle: HeaderStyle( - leftChevronIcon: null, - leftChevronMargin: EdgeInsets.zero, - leftChevronPadding: EdgeInsets.zero, - rightChevronMargin: EdgeInsets.zero, - formatButtonVisible: false, - rightChevronPadding: EdgeInsets.only(bottom: 16.toScreenHeight), - rightChevronIcon: const Icon(Icons.calendar_today, color: AppColor.neutral60, size: 18), - titleTextStyle: AppTextStyles.heading5, + 16.height, + Container( + decoration: BoxDecoration(color: AppColor.neutral30, borderRadius: BorderRadius.circular(16)), + child: TabBar( + controller: _tabController, + padding: EdgeInsets.zero, + labelColor: AppColor.neutral60, + unselectedLabelColor: AppColor.neutral20, + indicatorPadding: const EdgeInsets.all(4), + indicator: BoxDecoration(color: Theme.of(context).cardColor, borderRadius: BorderRadius.circular(13)), + onTap: (index) { + setState(() {}); + }, + tabs: [ + Tab(text: "Monthly", height: 57.toScreenHeight), + Tab(text: "Weekly", height: 57.toScreenHeight), + Tab(text: "Daily", height: 57.toScreenHeight), + ], ), ), - ).expanded, - child, - ], - ).paddingOnly(start: 16, end: 16, top: 8, bottom: 8), + 8.height, + TabBarView( + physics: const NeverScrollableScrollPhysics(), + controller: _tabController, + children: const [ + MonthlyFragment(), + WeeklyFragment(), + DailyFragment(), + ], + ).expanded, + ], + ).paddingAll(16), + ), ); } } diff --git a/lib/new_views/pages/land_page/calender_fragments/calendar_header.dart b/lib/new_views/pages/land_page/calender_fragments/calendar_header.dart new file mode 100644 index 00000000..63a46837 --- /dev/null +++ b/lib/new_views/pages/land_page/calender_fragments/calendar_header.dart @@ -0,0 +1,32 @@ +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:test_sa/extensions/int_extensions.dart'; +import 'package:test_sa/extensions/text_extensions.dart'; +import 'package:test_sa/extensions/widget_extensions.dart'; + +import '../../../app_style/app_color.dart'; + +class CalendarHeader extends StatelessWidget { + final DateTime dateTime; + final DateFormat dateFormat; + const CalendarHeader({@required this.dateTime, @required this.dateFormat, Key key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Column( + children: [ + Row( + children: [ + dateFormat.format(dateTime).heading5(context), + 6.width, + const Align(alignment: AlignmentDirectional.centerEnd, child: Icon(Icons.keyboard_arrow_down_sharp, color: AppColor.neutral60, size: 24)), + const Spacer(), + const Align(alignment: AlignmentDirectional.centerEnd, child: Icon(Icons.calendar_today, color: AppColor.neutral60, size: 18)), + ], + ), + 8.height, + const Divider().defaultStyle(context), + ], + ); + } +} diff --git a/lib/new_views/pages/land_page/calender_fragments/calender_days_card.dart b/lib/new_views/pages/land_page/calender_fragments/calender_days_card.dart new file mode 100644 index 00000000..925929b6 --- /dev/null +++ b/lib/new_views/pages/land_page/calender_fragments/calender_days_card.dart @@ -0,0 +1,40 @@ +import 'package:flutter/material.dart'; +import 'package:test_sa/extensions/int_extensions.dart'; +import 'package:test_sa/extensions/text_extensions.dart'; + +import '../../../app_style/app_color.dart'; + +class CalendarDaysCard extends StatelessWidget { + final String day; + const CalendarDaysCard({Key key, @required this.day}) : super(key: key); + + @override + Widget build(BuildContext context) { + final bgColor = day == "1" ? AppColor.neutral30 : (day == "2" ? AppColor.primary40 : AppColor.green50).withOpacity(0.3); + final dotColor = (day == "1" + ? Colors.transparent + : day == "2" + ? AppColor.primary40 + : AppColor.green50); + return SizedBox( + height: 45.toScreenWidth, + width: 45.toScreenWidth, + child: Stack( + children: [ + Container( + height: 37.toScreenWidth, + width: 37.toScreenWidth, + alignment: Alignment.center, + decoration: BoxDecoration(shape: BoxShape.circle, color: bgColor), + child: day.bodyText(context).custom(color: AppColor.neutral50), + ), + PositionedDirectional( + bottom: 16.toScreenHeight, + end: 16.toScreenWidth, + child: CircleAvatar(backgroundColor: dotColor, radius: 2.5), + ), + ], + ), + ); + } +} diff --git a/lib/new_views/pages/land_page/calender_fragments/daily_fragment.dart b/lib/new_views/pages/land_page/calender_fragments/daily_fragment.dart index 4d38ad20..c0182e20 100644 --- a/lib/new_views/pages/land_page/calender_fragments/daily_fragment.dart +++ b/lib/new_views/pages/land_page/calender_fragments/daily_fragment.dart @@ -1,7 +1,8 @@ import 'package:flutter/material.dart'; +import 'package:test_sa/extensions/text_extensions.dart'; class DailyFragment extends StatefulWidget { - DailyFragment({Key key}) : super(key: key); + const DailyFragment({Key key}) : super(key: key); @override _DailyFragmentState createState() { @@ -24,6 +25,10 @@ class _DailyFragmentState extends State { @override Widget build(BuildContext context) { - return Container(); + return SingleChildScrollView( + child: Column( + children: ["Daily".heading5(context)], + ), + ); } } diff --git a/lib/new_views/pages/land_page/calender_fragments/monthly_fragment.dart b/lib/new_views/pages/land_page/calender_fragments/monthly_fragment.dart index fdff4e54..10152d24 100644 --- a/lib/new_views/pages/land_page/calender_fragments/monthly_fragment.dart +++ b/lib/new_views/pages/land_page/calender_fragments/monthly_fragment.dart @@ -1,63 +1,81 @@ import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; import 'package:table_calendar/table_calendar.dart'; import 'package:test_sa/extensions/int_extensions.dart'; -import 'package:test_sa/extensions/text_extensions.dart'; import 'package:test_sa/extensions/widget_extensions.dart'; -import 'package:test_sa/new_views/app_style/app_color.dart'; + +import '../../../../extensions/text_extensions.dart'; +import '../../../app_style/app_color.dart'; +import 'calendar_header.dart'; +import 'calender_days_card.dart'; class MonthlyFragment extends StatefulWidget { - MonthlyFragment({Key key}) : super(key: key); + const MonthlyFragment({Key key}) : super(key: key); @override - _MonthlyFragmentState createState() { - return _MonthlyFragmentState(); - } + State createState() => _MonthlyFragmentState(); } class _MonthlyFragmentState extends State { - DateTime currentDateTime = DateTime.now(); - - @override - void initState() { - super.initState(); - } - - @override - void dispose() { - super.dispose(); - } - + PageController _controller; @override Widget build(BuildContext context) { - return Column( - children: [ - 1.divider.paddingOnly(top: 16, bottom: 16), - TableCalendar( - headerVisible: false, - firstDay: DateTime.utc(2010, 10, 16), - lastDay: DateTime.utc(2030, 3, 14), - focusedDay: currentDateTime, - currentDay: currentDateTime, - rowHeight: 37, - calendarStyle: CalendarStyle( - todayDecoration: cellDecoration(), - todayTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), - selectedTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), - rangeStartTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), - rangeEndTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), - ), - daysOfWeekStyle: DaysOfWeekStyle( - weekdayStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), - weekendStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), - ), - availableGestures: AvailableGestures.none, - ), - ], - ).toShadowContainer; + return Card( + child: SingleChildScrollView( + child: Column( + children: [ + TableCalendar( + firstDay: DateTime.utc(2010, 10, 16), + lastDay: DateTime.utc(2030, 3, 14), + focusedDay: DateTime.now(), + calendarFormat: CalendarFormat.month, + weekendDays: const [], + onCalendarCreated: (controller) { + _controller = controller; + }, + calendarBuilders: CalendarBuilders( + headerTitleBuilder: (context, dateTime) => CalendarHeader(dateFormat: DateFormat("MMMM, yyyy"), dateTime: dateTime), + dowBuilder: (context, dateTime) { + final day = DateFormat("EE").format(dateTime).toUpperCase(); + return Align(alignment: Alignment.center, child: day.bodyText(context).custom(color: AppColor.neutral50)); + }, + defaultBuilder: (context, dateTime, _) { + final day = DateFormat("d").format(dateTime); + return CalendarDaysCard(day: day); + }, + ), + daysOfWeekHeight: 35.toScreenHeight, + headerStyle: const HeaderStyle(leftChevronVisible: false, rightChevronVisible: false, formatButtonVisible: false), + calendarStyle: CalendarStyle( + isTodayHighlighted: false, + defaultTextStyle: AppTextStyles.bodyText, + defaultDecoration: const BoxDecoration(shape: BoxShape.circle, color: AppColor.neutral30), + ), + ), + Column( + mainAxisSize: MainAxisSize.min, + children: [ + 16.height, + Row( + children: [ + const CircleAvatar(backgroundColor: AppColor.primary40, radius: 8), + 8.width, + "My Requests".heading6(context), + ], + ), + 16.height, + Row( + children: [ + const CircleAvatar(backgroundColor: AppColor.green50, radius: 8), + 8.width, + "My Team Requests".heading6(context), + ], + ), + ], + ), + ], + ).paddingOnly(start: 16, end: 16, top: 8, bottom: 8), + ), + ); } - - BoxDecoration cellDecoration({Color color}) => BoxDecoration( - color: color ?? Colors.transparent, - shape: BoxShape.circle, - ); } diff --git a/lib/new_views/pages/land_page/calender_fragments/weekly_fragment.dart b/lib/new_views/pages/land_page/calender_fragments/weekly_fragment.dart index e804789a..c32e1a41 100644 --- a/lib/new_views/pages/land_page/calender_fragments/weekly_fragment.dart +++ b/lib/new_views/pages/land_page/calender_fragments/weekly_fragment.dart @@ -6,7 +6,7 @@ import 'package:test_sa/extensions/widget_extensions.dart'; import 'package:test_sa/new_views/app_style/app_color.dart'; class WeeklyFragment extends StatefulWidget { - WeeklyFragment({Key key}) : super(key: key); + const WeeklyFragment({Key key}) : super(key: key); @override _WeeklyFragmentState createState() { @@ -29,37 +29,36 @@ class _WeeklyFragmentState extends State { @override Widget build(BuildContext context) { - - return Column( - children: [ - 1.divider.paddingOnly(top: 16, bottom: 16), - TableCalendar( - headerVisible: false, - calendarFormat: CalendarFormat.week, - firstDay: DateTime.utc(2010, 10, 16), - lastDay: DateTime.utc(2030, 3, 14), - focusedDay: currentDateTime, - currentDay: currentDateTime, - rowHeight: 37, - calendarStyle: CalendarStyle( - todayDecoration: cellDecoration(), - todayTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), - selectedTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), - rangeStartTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), - rangeEndTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), - ), - daysOfWeekStyle: DaysOfWeekStyle( - weekdayStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), - weekendStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), + return SingleChildScrollView( + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + 1.divider.paddingOnly(top: 16, bottom: 16), + TableCalendar( + headerVisible: false, + calendarFormat: CalendarFormat.week, + firstDay: DateTime.utc(2010, 10, 16), + lastDay: DateTime.utc(2030, 3, 14), + focusedDay: currentDateTime, + currentDay: currentDateTime, + rowHeight: 37, + calendarStyle: CalendarStyle( + todayDecoration: cellDecoration(), + todayTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)), + selectedTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)), + rangeStartTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)), + rangeEndTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)), + ), + daysOfWeekStyle: DaysOfWeekStyle( + weekdayStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), + weekendStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), + ), + availableGestures: AvailableGestures.none, ), - availableGestures: AvailableGestures.none, - ), - ], - ).toShadowContainer; + ], + ).toShadowContainer, + ); } - BoxDecoration cellDecoration({Color color}) => BoxDecoration( - color: color ?? Colors.transparent, - shape: BoxShape.circle, - ); + BoxDecoration cellDecoration({Color color}) => BoxDecoration(color: color ?? Colors.transparent, shape: BoxShape.circle); }