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: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 '../../../../extensions/text_extensions.dart';
|
||||
import '../../../app_style/app_color.dart';
|
||||
import 'calendar_header.dart';
|
||||
import 'calender_days_card.dart';
|
||||
|
||||
class MonthlyFragment extends StatefulWidget {
|
||||
MonthlyFragment({Key key}) : super(key: key);
|
||||
const MonthlyFragment({Key key}) : super(key: key);
|
||||
|
||||
@override
|
||||
_MonthlyFragmentState createState() {
|
||||
return _MonthlyFragmentState();
|
||||
}
|
||||
State<MonthlyFragment> createState() => _MonthlyFragmentState();
|
||||
}
|
||||
|
||||
class _MonthlyFragmentState extends State<MonthlyFragment> {
|
||||
DateTime currentDateTime = DateTime.now();
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
PageController _controller;
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
children: [
|
||||
1.divider.paddingOnly(top: 16, bottom: 16),
|
||||
TableCalendar(
|
||||
headerVisible: false,
|
||||
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: Color(0xFF2B353E)),
|
||||
selectedTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)),
|
||||
rangeStartTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)),
|
||||
rangeEndTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)),
|
||||
),
|
||||
daysOfWeekStyle: DaysOfWeekStyle(
|
||||
weekdayStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50),
|
||||
weekendStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50),
|
||||
),
|
||||
availableGestures: AvailableGestures.none,
|
||||
),
|
||||
],
|
||||
).toShadowContainer;
|
||||
return Card(
|
||||
child: SingleChildScrollView(
|
||||
child: Column(
|
||||
children: [
|
||||
TableCalendar(
|
||||
firstDay: DateTime.utc(2010, 10, 16),
|
||||
lastDay: DateTime.utc(2030, 3, 14),
|
||||
focusedDay: DateTime.now(),
|
||||
calendarFormat: CalendarFormat.month,
|
||||
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(
|
||||
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,
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue