Flutter ThemeData Primary color not changing from theme when trying to add a primary color

Question

Im following the BMI Calculator app from the London App Brewery on LinkedIn Learning. when attempting to set the primaryColor to red, my emulator still shows the Light Blue default AppBar even though i am overriding the Primary Color. here's the code

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.red,
      ),
      home: const InputPage(),
    );
  }
}

class InputPage extends StatefulWidget {
  const InputPage({Key? key}) : super(key: key);

  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BMI CALCULATOR'),
      ),
      body: const Center(
        child: Text('Body Text'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }
}

Answer 1

Use primarySwatch

theme: ThemeData(
    primarySwatch: Colors.red,
  ),

Answer 2

I am also attending same training from LondonAppBrewery. This code fixed the problem.

Widget build(BuildContext context) {
return MaterialApp(
  title: "BMI Calculator",
  debugShowCheckedModeBanner: false,
  theme: ThemeData.dark().copyWith(
    appBarTheme:AppBarTheme(
      backgroundColor: Color(0xff0a0e21),
    ),
    scaffoldBackgroundColor: Color(0xff0a0e21),
  ),
  home: InputPage(),
);

Answer 3

This issue has been pointed at flutter github page. They say

We will eventually be moving all components away from ThemeData.primaryColor

So you can use

 theme: ThemeData(
     colorScheme: ColorScheme.light().copyWith(primary: Colors.red),
 );

Answer 4

Using the following approach you can have full control over the individual properties in Themedata

class BMICalculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.pink,
        appBarTheme: AppBarTheme(
          backgroundColor: Colors.orangeAccent,
        ),
      ),
      home: InputPage(),
    );
  }
}

Answer 5

I'm undergoing the same training program. As Mohtashim mentioned above, I tried to tweak the background app theme code and it worked as expected.

theme: ThemeData(
  primarySwatch: Colors.pink,
  appBarTheme: AppBarTheme(
    backgroundColor: Color(0xFF101427), //use your hex code here
  ),
)

Answer 6

theme: ThemeData.dark().copyWith(
        colorScheme: ColorScheme.light(
          primary: Color(0xFF0A0E21),
        ),
        scaffoldBackgroundColor: Color(0xFF0A0D22),
      ),

Answer 7

U can Use :

    theme: ThemeData(
        colorScheme: ColorScheme.fromSwatch(
          primarySwatch: Colors.red,
        )
    )

Answer 8

Try this code for changing app bar color worked for me,replace the color code as per ur need

 Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.red,
        appBarTheme: AppBarTheme(
          backgroundColor: Color(0xFF0A0E21),
        ),
        accentColor: Colors.purple,
      ),
      home: InputPage(),
    );

Answer 9

I also figured out just like you guys answered above. However, in dark design there was a shadowColor missing, so I added it.

@override
Widget build(BuildContext context) {
return MaterialApp(
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
    appBarTheme: const AppBarTheme(
      backgroundColor: Color(0xFF0a0e21),
      elevation: 5.0,
      shadowColor: Colors.black87,
    ),
    primaryColor: const Color(0xFF0A0E21),
    colorScheme: ColorScheme.fromSwatch().copyWith(
      secondary: const Color(0xFF101427),
    ),
    scaffoldBackgroundColor: const Color(0xFF0A0E21),
    ),
    home: const MainPage(),
  );
 }
}

Answer 10

I follow the same course. This is the code that helped me. Also thank you guys for answering the questions above. I nearly pulled out my hair. If anyone knows why flutter changes and deprecates syntax so dramatically please explain. It would be nice to know.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          backgroundColor: Color(0xff0a0e21),
        ),
        primaryColor: Color(0xFF0A0E21),
        scaffoldBackgroundColor: Color(0xFF0A0E21),
        colorScheme: ColorScheme.fromSwatch().copyWith(
          secondary: Colors.purple,
        ),
      ),
      home: InputPage(),
    );
  }
}