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'),
        ),
      ),
    );
  }
}