Weekly Calendar Design

main_design2.0
zaid_daoud 2 years ago
parent 3af18cb884
commit d908fe1c9d

@ -1,10 +1,13 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:table_calendar/table_calendar.dart'; import 'package:table_calendar/table_calendar.dart';
import 'package:test_sa/extensions/int_extensions.dart'; import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart'; import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart'; import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/new_views/app_style/app_color.dart'; import 'package:test_sa/new_views/app_style/app_color.dart';
import 'calender_days_card.dart';
class WeeklyFragment extends StatefulWidget { class WeeklyFragment extends StatefulWidget {
const WeeklyFragment({Key key}) : super(key: key); const WeeklyFragment({Key key}) : super(key: key);
@ -16,6 +19,7 @@ class WeeklyFragment extends StatefulWidget {
class _WeeklyFragmentState extends State<WeeklyFragment> { class _WeeklyFragmentState extends State<WeeklyFragment> {
DateTime currentDateTime = DateTime.now(); DateTime currentDateTime = DateTime.now();
PageController _controller;
@override @override
void initState() { void initState() {
@ -33,28 +37,62 @@ class _WeeklyFragmentState extends State<WeeklyFragment> {
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
1.divider.paddingOnly(top: 16, bottom: 16),
TableCalendar( TableCalendar(
headerVisible: false,
calendarFormat: CalendarFormat.week,
firstDay: DateTime.utc(2010, 10, 16), firstDay: DateTime.utc(2010, 10, 16),
lastDay: DateTime.utc(2030, 3, 14), lastDay: DateTime.utc(2030, 3, 14),
focusedDay: currentDateTime, focusedDay: DateTime.now(),
currentDay: currentDateTime, calendarFormat: CalendarFormat.week,
rowHeight: 37, weekendDays: const [],
calendarStyle: CalendarStyle( onCalendarCreated: (controller) {
todayDecoration: cellDecoration(), _controller = controller;
todayTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)), },
selectedTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)), calendarBuilders: CalendarBuilders(
rangeStartTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)), headerTitleBuilder: (context, dateTime) => Column(
rangeEndTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)), 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( daysOfWeekHeight: 35.toScreenHeight,
weekdayStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), headerStyle: const HeaderStyle(leftChevronVisible: false, rightChevronVisible: false, formatButtonVisible: false),
weekendStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), 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, ).toShadowContainer,
); );

Loading…
Cancel
Save