Flutter ThemeData Primary color not changing from theme when trying to add a primary color
7,032
Solution 1
Use primarySwatch
theme: ThemeData(
primarySwatch: Colors.red,
),
Solution 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(),
);
Solution 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),
);
Solution 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(),
);
}
}
Solution 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
),
)
Author by
EhCanadianGuy27 COD
Updated on January 01, 2023Comments
-
EhCanadianGuy27 COD over 1 year
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), ), ); } }
-
F Perroch over 2 yearsYour code is still good ! You may pay attention on reinstalling your app or check if hot reload is working
-
-
skr over 2 yearsHow would you use a hex color?
-
programmer over 2 yearscheck out this article on dev dev.to/rohanjsh/…
-
Jeremy Caney over 2 yearsWelcome to Stack Overflow, and thank you for contributing an answer. Would you kindly edit your answer to to include an explanation of your code? That will help future readers better understand what is going on, and especially those members of the community who are new to the language and struggling to understand the concepts. That's especially important when there's already four other answers that have been submitted. Under what conditions might your approach be preferred? Are you taking advantage of different capabilities? E.g., why do you prefer
colorScheme
overprimarySwatch
? -
ali masarra over 2 yearsthanks bro, same here following her course