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,121 +27,57 @@ 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(
mainAxisSize: MainAxisSize.min, child: Column(
crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min,
children: [ crossAxisAlignment: CrossAxisAlignment.start,
// todo @sikander, hiding My shift view, later when they add data, then will us it. children: [
SizedBox( // todo @sikander, hiding My shift view, later when they add data, then will us it.
width: double.infinity, SizedBox(
child: Column( width: double.infinity,
crossAxisAlignment: CrossAxisAlignment.start, child: Column(
children: [ crossAxisAlignment: CrossAxisAlignment.start,
"My Shift".heading5(context), children: [
8.height, "My Shift".heading5(context),
"Sunday to Thursday".bodyText(context), 8.height,
"09:00 to 18:00".bodyText(context).custom(color: AppColor.neutral50), "Sunday to Thursday".bodyText(context),
], "09:00 to 18:00".bodyText(context).custom(color: AppColor.neutral50),
).toShadowContainer, ],
), ).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),
],
), ),
), 16.height,
8.height, Container(
TabBarView( decoration: BoxDecoration(color: AppColor.neutral30, borderRadius: BorderRadius.circular(16)),
physics: const NeverScrollableScrollPhysics(), child: TabBar(
controller: _tabController, controller: _tabController,
children: [ padding: EdgeInsets.zero,
CalendarCard( labelColor: AppColor.neutral60,
calendarFormat: CalendarFormat.month, unselectedLabelColor: AppColor.neutral20,
child: Column( indicatorPadding: const EdgeInsets.all(4),
children: [ indicator: BoxDecoration(color: Theme.of(context).cardColor, borderRadius: BorderRadius.circular(13)),
16.height, onTap: (index) {
Row( setState(() {});
children: [ },
const CircleAvatar(backgroundColor: AppColor.primary40, radius: 8), tabs: [
8.width, Tab(text: "Monthly", height: 57.toScreenHeight),
"My Requests".heading6(context), Tab(text: "Weekly", height: 57.toScreenHeight),
], Tab(text: "Daily", height: 57.toScreenHeight),
), ],
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,
), ),
), ),
).expanded, 8.height,
child, TabBarView(
], physics: const NeverScrollableScrollPhysics(),
).paddingOnly(start: 16, end: 16, top: 8, bottom: 8), controller: _tabController,
children: const [
MonthlyFragment(),
WeeklyFragment(),
DailyFragment(),
],
).expanded,
],
).paddingAll(16),
),
); );
} }
} }

@ -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(
children: [ child: SingleChildScrollView(
1.divider.paddingOnly(top: 16, bottom: 16), child: Column(
TableCalendar( children: [
headerVisible: false, TableCalendar(
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 [],
calendarStyle: CalendarStyle( onCalendarCreated: (controller) {
todayDecoration: cellDecoration(), _controller = controller;
todayTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), },
selectedTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), calendarBuilders: CalendarBuilders(
rangeStartTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), headerTitleBuilder: (context, dateTime) => CalendarHeader(dateFormat: DateFormat("MMMM, yyyy"), dateTime: dateTime),
rangeEndTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), dowBuilder: (context, dateTime) {
), final day = DateFormat("EE").format(dateTime).toUpperCase();
daysOfWeekStyle: DaysOfWeekStyle( return Align(alignment: Alignment.center, child: day.bodyText(context).custom(color: AppColor.neutral50));
weekdayStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), },
weekendStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), defaultBuilder: (context, dateTime, _) {
), final day = DateFormat("d").format(dateTime);
availableGestures: AvailableGestures.none, return CalendarDaysCard(day: day);
), },
], ),
).toShadowContainer; 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,
);
} }

@ -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,37 +29,36 @@ class _WeeklyFragmentState extends State<WeeklyFragment> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return SingleChildScrollView(
return Column( child: Column(
children: [ mainAxisSize: MainAxisSize.min,
1.divider.paddingOnly(top: 16, bottom: 16), children: [
TableCalendar( 1.divider.paddingOnly(top: 16, bottom: 16),
headerVisible: false, TableCalendar(
calendarFormat: CalendarFormat.week, headerVisible: false,
firstDay: DateTime.utc(2010, 10, 16), calendarFormat: CalendarFormat.week,
lastDay: DateTime.utc(2030, 3, 14), firstDay: DateTime.utc(2010, 10, 16),
focusedDay: currentDateTime, lastDay: DateTime.utc(2030, 3, 14),
currentDay: currentDateTime, focusedDay: currentDateTime,
rowHeight: 37, currentDay: currentDateTime,
calendarStyle: CalendarStyle( rowHeight: 37,
todayDecoration: cellDecoration(), calendarStyle: CalendarStyle(
todayTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), todayDecoration: cellDecoration(),
selectedTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), todayTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)),
rangeStartTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), selectedTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)),
rangeEndTextStyle: AppTextStyles.bodyText.copyWith(color: 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), daysOfWeekStyle: DaysOfWeekStyle(
weekendStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), 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( BoxDecoration cellDecoration({Color color}) => BoxDecoration(color: color ?? Colors.transparent, shape: BoxShape.circle);
color: color ?? Colors.transparent,
shape: BoxShape.circle,
);
} }

Loading…
Cancel
Save