我们如何调整flutter中table_calendar的header高度

Question

The default height of calendar header is too high how can I resize it to make the blue part of the calendar a little bit smaller

]

 Container(
  decoration: const BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(20),
          bottomRight: Radius.circular(20),
          topLeft: Radius.circular(40),
          topRight: Radius.circular(40))),
  
  child: TableCalendar(

    daysOfWeekStyle: const DaysOfWeekStyle(
        decoration: BoxDecoration(color: Colors.white)),
    daysOfWeekHeight: 20,

    calendarFormat: CalendarFormat.week,
    weekendDays: const [DateTime.sunday],
    calendarStyle: CalendarStyle(


       
        todayDecoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            gradient: const LinearGradient(
                colors: [Color(0xFF20264B), Color(0xFF213BCE)],
                begin: Alignment.centerLeft,
                end: Alignment.centerRight)),
        rowDecoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(20),
                bottomRight: Radius.circular(20))),
        weekendTextStyle: const TextStyle(color: Colors.red)),
    headerStyle: HeaderStyle(
      headerMargin: EdgeInsets.only(bottom: 10),
        titleTextStyle: const TextStyle(color: Colors.white, fontSize: 20),
        decoration: BoxDecoration(
          shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(50),
            gradient: const LinearGradient(

                colors: [Color(0xFF20264B), Color(0xFF213BCE)],
                begin: Alignment.centerLeft,
                end: Alignment.centerRight)),
        formatButtonVisible: false,
        titleCentered: true,
       
       
    firstDay: DateTime.utc(2010, 10, 16),
    lastDay: DateTime.utc(2030, 3, 14),
    focusedDay: DateTime.now(),

  ),
);

I've tried and checked many possible ways but none of it worked as there is no property for adjust height in the package. So if anyone can suggest me a workaround or a solution then it'd be really appreciated.

Answer 1

Have you tried headerStyle property? to adjust the height of the calendar header

 TableCalendar(
  headerStyle: HeaderStyle(
    height: 50, 
    .........