Search code examples
flutterflutter-appbarthemedata

Why is my Flutter ThemeData not getting applied to my app?


I am just starting to learn Flutter and am following a Youtube tutorial. As far as I can tell I've copied the code exactly, however, my ThemeData is not getting applied to my app. I've also noticed that the Youtuber's app bar defaults to Blue and centers the text by default as well. My default app bar is white and left aligned.

I tried adding primarySwatch to make the app bar yellow. However, it didn't change anything with the app or cause any errors. Is there something dumb I'm missing?

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(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
      theme: ThemeData(primarySwatch: Colors.yellow,),
    );
  }
}


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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.yellow[200],
      appBar: AppBar(
        title: Text("TO DO"),
        elevation: 0,
      ),
    );
  }
}

ScreenShot

enter image description here


Solution

  • I've also noticed that the Youtuber's app bar defaults to Blue and centers the text by default as well.

    The tutorial you are using is probably Using material 2 design.

    But Material3 is now applied by default to newer Flutter projects.


    You can disable material3 in your ThemeData:

    return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: HomePage(),
          theme: ThemeData(useMaterial3: false // --> Set to to false
              ),
        );
    

    which results in a blue appbar (as desired):

    enter image description here

    See also