Weekly Calendar Design

lib/new_views/pages/land_page/calender_fragments/weekly_fragment.dart

@@ -1,10 +1,13 @@
 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 'calender_days_card.dart';
+
 class WeeklyFragment extends StatefulWidget {
   const WeeklyFragment({Key key}) : super(key: key);
 
@@ -16,6 +19,7 @@ class WeeklyFragment extends StatefulWidget {
 
 class _WeeklyFragmentState extends State<WeeklyFragment> {
   DateTime currentDateTime = DateTime.now();
+  PageController _controller;
 
   @override
   void initState() {
@@ -33,28 +37,62 @@ class _WeeklyFragmentState extends State<WeeklyFragment> {
       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)),
+            focusedDay: DateTime.now(),
+            calendarFormat: CalendarFormat.week,
+            weekendDays: const [],
+            onCalendarCreated: (controller) {
+              _controller = controller;
+            },
+            calendarBuilders: CalendarBuilders(
+              headerTitleBuilder: (context, dateTime) => Column(
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                children: [
+                  DateFormat("EEEE, d MMMM, yyyy").format(dateTime).heading5(context),
+                  8.height,
+                  const Divider().defaultStyle(context),
+                ],
+              ),
+              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);
+              },
             ),
-            daysOfWeekStyle: DaysOfWeekStyle(
-              weekdayStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50),
-              weekendStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50),
+            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),
             ),
-            availableGestures: AvailableGestures.none,
           ),
+          // 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,
+          // ),
         ],
       ).toShadowContainer,
     );