How can I add text below the table calendar header?

Question

How can I add the text “pick a day” below the table calendar header < November 2022 >?

I have done a lot research but I have no idea how to do this. I have google and do research on stackoverflow but don’t have any related information.

how can I add the text “pick a day” below the table calendar header of "< November 2022 >?

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

class Journal extends StatefulWidget {
  const Journal({super.key});



 @override
  State<Journal> createState() => _JournalState();
}

class _JournalState extends State<Journal> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Padding(
          padding:
              const EdgeInsets.only(left: 19, top: 8, bottom: 10, right: 19),
          child: IconButton(
            onPressed: () {},
            icon: const Icon(Icons.arrow_back_ios,
                color: Color.fromARGB(255, 0, 97, 146)),
          ),
        ),
        title: const Text('Meds-On-Time',
            style: TextStyle(
                fontWeight: FontWeight.w400,
                fontFamily: 'Inter',
                fontSize: 18)),
        centerTitle: true,
        actions: [
          Padding(
            padding:
                const EdgeInsets.only(left: 19, top: 8, bottom: 10, right: 10),
            child: InkWell(
              onTap: () {},
              child: Image.asset(
                'assets/images/action_Icons.png',
                width: 24,
                height: 24,
              ),
            ),
          ),
        ],
      ),
      body: Container(
        constraints: const BoxConstraints.expand(),
        decoration: const BoxDecoration(
          image: DecorationImage(
              image: AssetImage("assets/images/background_onTime.png"),
              fit: BoxFit.cover),
        ),
        child: Column(
          children: [
            TableCalendar(
              locale: "en_US",
              rowHeight: 40,
              headerStyle: const HeaderStyle(
                formatButtonVisible: false,
                titleCentered: true,
              ),
              focusedDay: DateTime.utc(2023, 11, 24),
              firstDay: DateTime.utc(2010, 11, 30),
              lastDay: DateTime.utc(2043, 11, 30),
              currentDay: DateTime.utc(2023, 11, 24),
            ),
            Text("Pick a date to view your journal"),
          ],
        ),
      ),
    );
  }
}

Answer 1

You want to add a title of "pick a day" to the header.

Now, upon looking at the documentation of table_calendar, theres a HeaderStyle which you are using.

What you can do is to modify the titleTextFormatter which is described as:

Use to customize header's title text (e.g. with different DateFormat).

Meaning, you can return a String with the correct date.

But, since you also want "pick a day" with the title, you can return a date as a String, and also the text "Pick a day"

headerStyle: HeaderStyle(
            titleTextFormatter: (date, locale) {
              // coming from the intl package
              return DateFormat.yMMMM(locale).format(date) +
                  "\n" +
                  "pick a date";
            },
            titleCentered: true,
          ),

You'll need to import the intl package to correctly format the date.

---

Here's a complete runnable snippet:

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:table_calendar/table_calendar.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: TableCalendar(
          headerVisible: true,
          calendarFormat: CalendarFormat.month,
          locale: "en_US",
          rowHeight: 40,
          headerStyle: HeaderStyle(
            titleTextFormatter: (date, locale) {
              // coming from the intl package
              return DateFormat.yMMMM(locale).format(date) +
                  "\n" +
                  "pick a date";
            },
            titleCentered: true,
          ),
          focusedDay: DateTime.utc(2023, 11, 24),
          firstDay: DateTime.utc(2010, 11, 30),
          lastDay: DateTime.utc(2043, 11, 30),
          currentDay: DateTime.utc(2023, 11, 24),
        ),
      ),
    );
  }
}