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
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):
See also