I want to change the date string of showDatePicker on flutter

Question

I want to customize the color and the text of this showDatePicker with material3, on flutter

I want to customize as this

I need this text to be something like this "Seg, 17 de jul."

Answer 1

Here's a simple example

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Date Picker Theme Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.blueGrey),
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Date Picker Theme Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Show the date picker
            showDatePicker(
              context: context,
              initialEntryMode: DatePickerEntryMode.calendar,
              initialDate: DateTime.now(),
              firstDate: DateTime.now(),
              lastDate: DateTime.now(),
              builder: (context, child) {
                return Theme(
                  data: Theme.of(context).copyWith(
                    datePickerTheme: DatePickerTheme.of(context).copyWith(
                      backgroundColor: Colors.grey,
                      shadowColor: Colors.blue,
                      headerHelpStyle: const TextStyle(
                        color: Colors.white,
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                      headerHeadlineStyle: const TextStyle(
                        color: Colors.white,
                        fontSize: 18,
                      ),
                      yearStyle: const TextStyle(
                        color: Colors.white,
                        fontSize: 18,
                      ),
                      dayStyle: const TextStyle(
                        color: Colors.white,
                        fontSize: 18,
                      ),
                      rangePickerHeaderHelpStyle: const TextStyle(
                        color: Colors.white,
                        fontSize: 18,
                      ),
                      weekdayStyle: const TextStyle(
                        color: Colors.white,
                        fontSize: 22,
                      ),
                    ),
                  ),
                  child: child!,
                );
              },
            );
          },
          child: const Text('Open Date Picker'),
        ),
      ),
    );
  }
}

Answer 2

You can use this flutter package adoptive_calendar to pick a Date and Time with full Theme customization in easy way see Demo Image

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

void main() {
  runApp(const MyApp());
}

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

  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example Adoptive Calendar',
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: const ExampleAdoptiveCalendar(),
    );
  }
}

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

  @override
  State<ExampleAdoptiveCalendar> createState() =>
      _ExampleAdoptiveCalendarState();
}

class _ExampleAdoptiveCalendarState extends State<ExampleAdoptiveCalendar> {
  DateTime? pickedDate;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.deepPurpleAccent,
        title: const Text(
          "Adoptive Calendar Example",
          style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
        ),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          Flexible(
            child: Center(
                child: ElevatedButton(
              onPressed: () async {
                pickedDate = await showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return AdoptiveCalendar(
                      initialDate: DateTime.now(),
                    );
                  },
                );
                setState(() {});
              },
              child: const Text("Open Calendar"),
            )),
          ),
          const SizedBox(height: 20),
          Center(child: Text(pickedDate.toString())),
          const SizedBox(height: 40),
        ],
      ),
    );
  }
}