why custom theme properties not working [dart]?

Question

This is a custom theme code that I created in the main page.
It didnt work, but when I use it indivually with a specific widget it works

import 'package:flutter/material.dart';
import 'package:theme/homepage.dart';

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

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

    @override
    State<StatefulWidget> createState() {
        return _MyAppState();
    }
}

class _MyAppState extends State<MyApp> {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            debugShowCheckedModeBanner: false,
           ** theme: ThemeData(
                appBarTheme: AppBarTheme(backgroundColor: Colors.red),
                fontFamily: "Sixtyfour"
            ),**
            home: Home(),
        );
    }
}

Answer 1

Your code mostly correct, but there is an issue with the placement of the theme property within the MaterialApp. The theme property should be placed directly under MaterialApp, not under debugShowCheckedModeBanner.

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        appBarTheme: AppBarTheme(backgroundColor: Colors.red),
        fontFamily: "Sixtyfour",
      ),
      home: Home(),
    );
  }
}

By placing the theme property directly under MaterialApp, it should apply the custom theme to the entire app, including the HomePage widget. Make sure there are no conflicts with other theme settings in your app that might override this custom theme.