todayBorder property

Overrides the border used to paint the DatePickerDialog.currentDate label in the grid of the date picker.

If the border side's BorderSide.color is transparent (has 0 opacity), todayForegroundColor is used instead. Otherwise, the border's color is used as specified. To omit the border entirely, set todayBorder to BorderSide.none.

This sample demonstrates how to customize the day selector shape decoration using the dayShape, todayForegroundColor, todayBackgroundColor, and todayBorder properties.

To see it in action, copy and run this code snippet on DartPad.

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [DatePickerThemeData].

void main() => runApp(const DatePickerApp());

class DatePickerApp extends StatelessWidget {
  const DatePickerApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        datePickerTheme: DatePickerThemeData(
          todayBackgroundColor: const WidgetStatePropertyAll<Color>(
            Colors.amber,
          ),
          todayForegroundColor: const WidgetStatePropertyAll<Color>(
            Colors.black,
          ),
          todayBorder: const BorderSide(width: 2),
          dayShape: WidgetStatePropertyAll<OutlinedBorder>(
            RoundedRectangleBorder(borderRadius: .circular(8.0)),
          ),
          shape: RoundedRectangleBorder(borderRadius: .circular(16.0)),
        ),
      ),
      home: const DatePickerExample(),
    );
  }
}

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

  @override
  State<DatePickerExample> createState() => _DatePickerExampleState();
}

class _DatePickerExampleState extends State<DatePickerExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: OutlinedButton(
          onPressed: () {
            showDatePicker(
              context: context,
              initialDate: DateTime(2021, 1, 20),
              currentDate: DateTime(2021, 1, 15),
              firstDate: DateTime(2021),
              lastDate: DateTime(2022),
            );
          },
          child: const Text('Open Date Picker'),
        ),
      ),
    );
  }
}

Implementation

DatePickerThemeData class