Working On Calendar

design_3.0_demo_module
zaid_daoud 2 years ago
parent c93e249519
commit 3af18cb884

@ -1,5 +1,4 @@
import 'package:flutter/material.dart'; 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/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';
@ -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/daily_fragment.dart';
import 'package:test_sa/new_views/pages/land_page/calender_fragments/weekly_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 { class CalendarPage extends StatefulWidget {
const CalendarPage({Key key}) : super(key: key); const CalendarPage({Key key}) : super(key: key);
@ -28,7 +27,8 @@ class _CalendarPageState extends State<CalendarPage> with SingleTickerProviderSt
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
body: Column( body: SafeArea(
child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
@ -69,80 +69,15 @@ class _CalendarPageState extends State<CalendarPage> with SingleTickerProviderSt
TabBarView( TabBarView(
physics: const NeverScrollableScrollPhysics(), physics: const NeverScrollableScrollPhysics(),
controller: _tabController, controller: _tabController,
children: [ children: const [
CalendarCard( MonthlyFragment(),
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(), WeeklyFragment(),
DailyFragment(), DailyFragment(),
], ],
).expanded, ).expanded,
], ],
).paddingAll(16),
), ),
); );
} }
} }
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,
),
),
).expanded,
child,
],
).paddingOnly(start: 16, end: 16, top: 8, bottom: 8),
);
}
}

@ -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),
],
);
}
}

@ -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),
),
],
),
);
}
}

@ -1,7 +1,8 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:test_sa/extensions/text_extensions.dart';
class DailyFragment extends StatefulWidget { class DailyFragment extends StatefulWidget {
DailyFragment({Key key}) : super(key: key); const DailyFragment({Key key}) : super(key: key);
@override @override
_DailyFragmentState createState() { _DailyFragmentState createState() {
@ -24,6 +25,10 @@ class _DailyFragmentState extends State<DailyFragment> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container(); return SingleChildScrollView(
child: Column(
children: ["Daily".heading5(context)],
),
);
} }
} }

@ -1,63 +1,81 @@
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/widget_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 { class MonthlyFragment extends StatefulWidget {
MonthlyFragment({Key key}) : super(key: key); const MonthlyFragment({Key key}) : super(key: key);
@override @override
_MonthlyFragmentState createState() { State<MonthlyFragment> createState() => _MonthlyFragmentState();
return _MonthlyFragmentState();
}
} }
class _MonthlyFragmentState extends State<MonthlyFragment> { class _MonthlyFragmentState extends State<MonthlyFragment> {
DateTime currentDateTime = DateTime.now(); PageController _controller;
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Column( return Card(
child: SingleChildScrollView(
child: Column(
children: [ children: [
1.divider.paddingOnly(top: 16, bottom: 16),
TableCalendar( TableCalendar(
headerVisible: false,
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.month,
rowHeight: 37, 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( calendarStyle: CalendarStyle(
todayDecoration: cellDecoration(), isTodayHighlighted: false,
todayTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), defaultTextStyle: AppTextStyles.bodyText,
selectedTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), defaultDecoration: const BoxDecoration(shape: BoxShape.circle, color: AppColor.neutral30),
rangeStartTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), ),
rangeEndTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)),
), ),
daysOfWeekStyle: DaysOfWeekStyle( Column(
weekdayStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), mainAxisSize: MainAxisSize.min,
weekendStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), children: [
16.height,
Row(
children: [
const CircleAvatar(backgroundColor: AppColor.primary40, radius: 8),
8.width,
"My Requests".heading6(context),
],
), ),
availableGestures: AvailableGestures.none, 16.height,
Row(
children: [
const CircleAvatar(backgroundColor: AppColor.green50, radius: 8),
8.width,
"My Team Requests".heading6(context),
],
), ),
], ],
).toShadowContainer; ),
} ],
).paddingOnly(start: 16, end: 16, top: 8, bottom: 8),
BoxDecoration cellDecoration({Color color}) => BoxDecoration( ),
color: color ?? Colors.transparent,
shape: BoxShape.circle,
); );
}
} }

@ -6,7 +6,7 @@ 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';
class WeeklyFragment extends StatefulWidget { class WeeklyFragment extends StatefulWidget {
WeeklyFragment({Key key}) : super(key: key); const WeeklyFragment({Key key}) : super(key: key);
@override @override
_WeeklyFragmentState createState() { _WeeklyFragmentState createState() {
@ -29,8 +29,9 @@ class _WeeklyFragmentState extends State<WeeklyFragment> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return SingleChildScrollView(
return Column( child: Column(
mainAxisSize: MainAxisSize.min,
children: [ children: [
1.divider.paddingOnly(top: 16, bottom: 16), 1.divider.paddingOnly(top: 16, bottom: 16),
TableCalendar( TableCalendar(
@ -43,10 +44,10 @@ class _WeeklyFragmentState extends State<WeeklyFragment> {
rowHeight: 37, rowHeight: 37,
calendarStyle: CalendarStyle( calendarStyle: CalendarStyle(
todayDecoration: cellDecoration(), todayDecoration: cellDecoration(),
todayTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), todayTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)),
selectedTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), selectedTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)),
rangeStartTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), rangeStartTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)),
rangeEndTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), rangeEndTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)),
), ),
daysOfWeekStyle: DaysOfWeekStyle( daysOfWeekStyle: DaysOfWeekStyle(
weekdayStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), weekdayStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50),
@ -55,11 +56,9 @@ class _WeeklyFragmentState extends State<WeeklyFragment> {
availableGestures: AvailableGestures.none, availableGestures: AvailableGestures.none,
), ),
], ],
).toShadowContainer; ).toShadowContainer,
);
} }
BoxDecoration cellDecoration({Color color}) => BoxDecoration( BoxDecoration cellDecoration({Color color}) => BoxDecoration(color: color ?? Colors.transparent, shape: BoxShape.circle);
color: color ?? Colors.transparent,
shape: BoxShape.circle,
);
} }

Loading…
Cancel
Save