cloudsolutions-atoms/lib/new_views/pages/land_page/calendar_page.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/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';

import '../../common_widgets/default_app_bar.dart';

class CalendarPage extends StatefulWidget {
  const CalendarPage({Key key}) : super(key: key);

  @override
  State<CalendarPage> createState() => _CalendarPageState();
}

class _CalendarPageState extends State<CalendarPage> with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const DefaultAppBar(title: ""),
      body: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Card(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                "My Shift".heading5(context),
                8.height,
                "Sunday to Thursday".bodyText(context),
                "09:00 to 18:00".bodyText(context).custom(color: AppColor.neutral50),
              ],
            ).paddingAll(16),
          ),
          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),
              ],
            ),
          ),
          8.height,
          TabBarView(
            physics: const NeverScrollableScrollPhysics(),
            controller: _tabController,
            children: [
              CalendarCard(
                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),
                      ],
                    ),
                  ],
                ),
              ),
              CalendarCard(
                calendarFormat: CalendarFormat.week,
                child: Column(
                  children: [
                    const Divider().defaultStyle(context),
                  ],
                ),
              ),
              Container(),
            ],
          ).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),
    );
  }
}