How to change font In Flutter Date Picker?

Question

How to change the title and other text's font family, size etc????

Answer 1

Use the Theme widget to customize the fonts, size and color and many other properties of showDatePicker. Just add the property builder to showDatePicker and wrap the child with the Theme widget.

Take a look at the live demo on DartPad

Before	After

Here's the source:

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _showDatePicker() {
    // showMaterialDatePicker(context: context);
    showDatePicker(
      context: context,
      initialDate: DateTime(2022),
      firstDate: DateTime(2022),
      lastDate: DateTime(2023),
      // initialDatePickerMode: DatePickerMode.year,
      initialEntryMode: DatePickerEntryMode.calendar,
      builder: (context, child) {
        return Theme(
          data: Theme.of(context).copyWith(
            dialogBackgroundColor: Colors.yellow, // days/years gridview
            textTheme: TextTheme(
              headline5: GoogleFonts.greatVibes(), // Selected Date landscape
              headline6: GoogleFonts.greatVibes(), // Selected Date portrait
              overline: GoogleFonts.greatVibes(), // Title - SELECT DATE
              bodyText1: GoogleFonts.greatVibes(), // year gridbview picker
              subtitle1: GoogleFonts.greatVibes(color: Colors.black), // input
              subtitle2: GoogleFonts.greatVibes(), // month/year picker
              caption: GoogleFonts.greatVibes(), // days
            ),
            colorScheme: Theme.of(context).colorScheme.copyWith(
                  // Title, selected date and day selection background (dark and light mode)
                  surface: Colors.amber,
                  primary: Colors.amber,
                  // Title, selected date and month/year picker color (dark and light mode)
                  onSurface: Colors.black,
                  onPrimary: Colors.black,
                ),
            // Buttons
            textButtonTheme: TextButtonThemeData(
              style: TextButton.styleFrom(
                foregroundColor: Colors.yellow,
                backgroundColor: Colors.pink,
                textStyle: GoogleFonts.greatVibes(),
              ),
            ),
            // Input
            inputDecorationTheme: InputDecorationTheme(
              labelStyle: GoogleFonts.greatVibes(), // Input label
            ),
          ),
          child: child!,
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: _showDatePicker,
        tooltip: 'Increment',
        child: const Icon(Icons.calendar_month),
      ),
    );
  }
}