Working On Calendar
parent
c93e249519
commit
3af18cb884
@ -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,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,
|
|
||||||
);
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue