dayShape property

Overrides the default shape used to paint the shape decoration of the day labels in the grid of the date picker.

If the selected day is the current day, the provided shape with the value of todayBackgroundColor is used to paint the shape decoration of the day label and the value of todayBorder and todayForegroundColor is used to paint the border.

If the selected day is not the current day, the provided shape with the value of dayBackgroundColor is used to paint the shape decoration of the day label.

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