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

CodePudding user response：

Use the

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

CodePudding user response：

You can specify fonts in ThemeData() in main.dart.

ThemeData(fontFamily: //Define your font)

NOTE:- It will affects in whole app.