Adding divider in Flutter Calendar Widget after weekdays

1

I am making a calendar widget like this Actual Image

But I am stuck in few parts which I cannot figure out:

  1. The divider that is added after weekdays
  2. The weekdays to be in capitals
  3. I want the dates under Saturday to be black.

I have made thus far:

Widget in progress

The code i've written is:

import 'package:epicare/NavigBar.dart';
import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';

class HistoryScreen extends StatefulWidget {
  @override
  _HistoryScreenState createState() => _HistoryScreenState();
}

class _HistoryScreenState extends State<HistoryScreen> {
  bool isSwitched = true;
  CalendarController _controller;
  @override
  void initState() {
    setState(() {
      _controller = CalendarController();
    });
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: const Color(0xffE5E0A1),
        elevation: 0,
        centerTitle: true,
        title: Text(
          "My Seizure History",
          style: TextStyle(
            fontSize: 15.0,
            color: Colors.black,
            fontFamily: 'Montserrat',
            fontWeight: FontWeight.normal,
          ),
        ),
        leading: IconButton(
          icon: Icon(
            Icons.arrow_back,
            color: Colors.black,
          ),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) {
                  return Homepage();
                },
              ),
            );
          },
        ),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Center(
              child: Container(
                margin: EdgeInsets.symmetric(vertical: 30),
                //height: size.width * 0.80,
                width: size.width * 0.80,
                padding: EdgeInsets.all(11.0),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20.0),
                  color: const Color(0xffffffff),
                  boxShadow: [
                    BoxShadow(
                      color: const Color(0x12000000),
                      offset: Offset(0, 7),
                      blurRadius: 24,
                    ),
                  ],
                ),
                child: TableCalendar(
                  initialCalendarFormat: CalendarFormat.month,
                  calendarStyle: CalendarStyle(
                    weekdayStyle: TextStyle(
                      fontFamily: 'Montserrat',
                      fontWeight: FontWeight.w600,
                      fontSize: 12,
                      color: const Color(0xff000000),
                      height: 1.3333333333333333,
                    ),
                    weekendStyle: TextStyle(
                      fontFamily: 'Montserrat',
                      fontWeight: FontWeight.w600,
                      fontSize: 12,
                      color: const Color(0xffD4D411),
                      height: 1.3333333333333333,
                    ),
                    renderDaysOfWeek: true,
                    markersMaxAmount: 20,
                    outsideStyle: TextStyle(
                      fontFamily: 'Montserrat',
                      fontWeight: FontWeight.w600,
                      fontSize: 12,
                      color: const Color(0xfff0efcd),
                      height: 1.3333333333333333,
                    ),
                    todayStyle: TextStyle(
                      fontFamily: 'Montserrat',
                      fontWeight: FontWeight.w600,
                      fontSize: 12,
                      color: const Color(0xff000000),
                    ),
                    outsideWeekendStyle: TextStyle(
                      fontFamily: 'Montserrat',
                      fontWeight: FontWeight.w600,
                      fontSize: 12,
                      color: const Color(0xfff0efcd),
                      height: 1.3333333333333333,
                    ),
                  ),
                  daysOfWeekStyle: DaysOfWeekStyle(
                    weekdayStyle: TextStyle(
                      fontFamily: 'Montserrat',
                      fontWeight: FontWeight.w600,
                      fontSize: 12,
                      color: const Color(0xffe6e4ae),
                      height: 1.3333333333333333,
                    ),
                    weekendStyle: TextStyle(
                      fontFamily: 'Montserrat',
                      fontWeight: FontWeight.w600,
                      fontSize: 12,
                      color: const Color(0xffe6e4ae),
                      height: 1.3333333333333333,
                    ),
                  ),
                  headerStyle: HeaderStyle(
                    titleTextStyle: TextStyle(
                      fontFamily: 'Montserrat',
                      fontWeight: FontWeight.w500,
                      fontSize: 15,
                      color: const Color(0xff000000),
                      height: 1.3333333333333333,
                    ),
                    leftChevronIcon: Icon(
                      Icons.keyboard_arrow_left,
                      size: 20,
                      color: Colors.black,
                    ),
                    formatButtonTextStyle: TextStyle(
                      color: Colors.blue
                    ),
                    rightChevronIcon: Icon(
                      Icons.keyboard_arrow_right,
                      size: 20,
                      color: Colors.black,
                    ),
                    formatButtonVisible: false,
                    centerHeaderTitle: true,
                  ),
                  builders: CalendarBuilders(
                    selectedDayBuilder: (context, date, events) => Container(
                      margin: const EdgeInsets.all(10.0),
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: const Color(0xffE5E3AD),
                        borderRadius: BorderRadius.circular(30.0),
                      ),
                      child: Text(
                        date.day.toString(),
                        style: TextStyle(
                          fontFamily: 'Montserrat',
                          fontWeight: FontWeight.w600,
                          fontSize: 12,
                          color: const Color(0xff000000),
                        ),
                      ),
                    ),
                    todayDayBuilder: (context, date, events) => Container(
                      margin: const EdgeInsets.all(10.0),
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          gradient: RadialGradient(
                            center: Alignment(-0.54, -1.0),
                            radius: 1.137,
                            colors: [
                              const Color(0xffebef76),
                              const Color(0xffd2d580),
                              const Color(0xffd6d098)
                            ],
                            stops: [0.0, 0.485, 1.0],
                          ),
                          borderRadius: BorderRadius.circular(30.0)),
                      child: Text(
                        date.day.toString(),
                        style: TextStyle(
                          fontFamily: 'Montserrat',
                          fontWeight: FontWeight.w600,
                          fontSize: 12,
                          color: const Color(0xff000000),
                          height: 1.3333333333333333,
                        ),
                      ),
                    ),
                  ),
                  calendarController: _controller,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Please help me out with the tasks, because I'm stuck in these parts. P.S I am a beginner in Flutter. A little help would be appreciated!

android
flutter
dart
asked on Stack Overflow Apr 7, 2021 by Nabia Salman • edited Apr 8, 2021 by Nabia Salman

0 Answers

Nobody has answered this question yet.


User contributions licensed under CC BY-SA 3.0