Get value data form selected day from table calendar flutter

Question

I want if we press a certain day on the calendar table then the text will automatically set the day that was clicked on.

enter image description here

Here is the code implemented using the TableCalendar:

     @override
          Widget build(BuildContext context) {
            return Scaffold(
              body: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.only(top:10.0,bottom: 5.0,left: 10.0,right: 10.0),
                      child: Text(tgl,style: TextStyle(color: Colors.green, fontSize: 16.0,fontWeight: FontWeight.w500),), 
                    ),//for the text I use datetimeNow
                    Padding(
                      padding: const EdgeInsets.only(bottom:10.0,left: 10.0,right: 10.0),
                      child: TableCalendar(
                        initialCalendarFormat: CalendarFormat.month,
                        calendarStyle: CalendarStyle(
                            todayColor: Colors.green,
                            selectedColor: Theme.of(context).primaryColor,
                            todayStyle: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 22.0,
                                color: Colors.white)
                        ),
                        headerStyle: HeaderStyle(
                          centerHeaderTitle: true,
                          formatButtonDecoration: BoxDecoration(
                            color: Colors.brown,
                            borderRadius: BorderRadius.circular(22.0),
                          ),
                          formatButtonTextStyle: TextStyle(color: Colors.white),
                          formatButtonShowsNext: false,
                        ),
                        startingDayOfWeek: StartingDayOfWeek.monday,
                        onDaySelected: (date, events,e) {
                          print(date.toUtc());
                        },

                        builders: CalendarBuilders(
                          selectedDayBuilder: (context, date, events) => Container(
                              margin: const EdgeInsets.all(5.0),
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                  color: Theme.of(context).primaryColor,
                                  borderRadius: BorderRadius.circular(8.0)),
                              child: Text(
                                date.day.toString(),
                                style: TextStyle(color: Colors.white),
                              )),
                          todayDayBuilder: (context, date, events) => Container(
                              margin: const EdgeInsets.all(5.0),
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                  color: Colors.black26,
                                  borderRadius: BorderRadius.circular(8.0)),
                              child: Text(
                                date.day.toString(),
                                style: TextStyle(color: Colors.white),
                              )),
                        ),
                        calendarController: _controller,

                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left:15.0,top: 10.0,right: 15.0),
                      child:
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text("Report __ ", style: TextStyle(
                            color: Colors.green, fontSize: 16.0,fontWeight: FontWeight.w500)
                          ),.................

Answer 1

You can use a variable that initially set at DateTime.now(), then update the value when the user click on a date. Something like this:

DateTime _chosenDate = DateTime.now();

// ... other lines

TableCalendar(
     initialSelectedDay: _chosenDate, // Set initial date
     onDaySelected: (date, events, e) {
        setState(() {
           _chosenDate = date; // Update the chosen date here
        });
     },
     ...

For the formatting, use this:

final dateFormat = DateFormat('EEEE yyyy-MMMM-dd');

Full sample code:

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

void main() {
  runApp(MaterialApp(
    home: SampleScreen(),
  ));
}
class SampleScreen extends StatefulWidget {
  @override
  _SampleScreenState createState() => _SampleScreenState();
}

class _SampleScreenState extends State<SampleScreen> {
  final _controller = CalendarController();
  final dateFormat = DateFormat('EEEE yyyy-MMMM-dd');
  DateTime _chosenDate = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(
                    top: 10.0, bottom: 5.0, left: 10.0, right: 10.0),
                child: Text(
                  dateFormat.format(_chosenDate),
                  style: TextStyle(
                      color: Colors.green,
                      fontSize: 16.0,
                      fontWeight: FontWeight.w500),
                ),
              ), //for the text I use datetimeNow
              Padding(
                padding:
                const EdgeInsets.only(bottom: 10.0, left: 10.0, right: 10.0),
                child: TableCalendar(
                  initialCalendarFormat: CalendarFormat.month,
                  initialSelectedDay: _chosenDate,
                  calendarStyle: CalendarStyle(
                      todayColor: Colors.green,
                      selectedColor: Theme
                          .of(context)
                          .primaryColor,
                      todayStyle: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 22.0,
                          color: Colors.white)),
                  headerStyle: HeaderStyle(
                    centerHeaderTitle: true,
                    formatButtonDecoration: BoxDecoration(
                      color: Colors.brown,
                      borderRadius: BorderRadius.circular(22.0),
                    ),
                    formatButtonTextStyle: TextStyle(color: Colors.white),
                    formatButtonShowsNext: false,
                  ),
                  startingDayOfWeek: StartingDayOfWeek.monday,
                  onDaySelected: (date, events, e) {
                    setState(() {
                      _chosenDate = date;
                    });
                  },
                  builders: CalendarBuilders(
                    selectedDayBuilder: (context, date, events) =>
                        Container(
                            margin: const EdgeInsets.all(5.0),
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                                color: Theme
                                    .of(context)
                                    .primaryColor,
                                borderRadius: BorderRadius.circular(8.0)),
                            child: Text(
                              date.day.toString(),
                              style: TextStyle(color: Colors.white),
                            )),
                    todayDayBuilder: (context, date, events) =>
                        Container(
                            margin: const EdgeInsets.all(5.0),
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                                color: Colors.black26,
                                borderRadius: BorderRadius.circular(8.0)),
                            child: Text(
                              date.day.toString(),
                              style: TextStyle(color: Colors.white),
                            )),
                  ),
                  calendarController: _controller,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}