I'm working through the startup_namer tutorial example from flutter.dev. Here's the definition of MyApp:
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Startup Name Generator',
theme: ThemeData(
// Add the 3 lines from here...
primaryColor: Colors.white,
), // ... to here.
home: RandomWords());
}
}
It used to be that when I ran the app, the title bar would be white. But now, it retains the default (blue) theme. Looks like either ThemeData or at least primaryColor are being ignored. Does anyone know how to fix this? Thank you.
Checkout this link and this quote from the Flutter-Team:
The ThemeData accentColor, accentColorBrightness, accentIconTheme and
accentTextTheme properties have been deprecated.
The Material Design spec no longer specifies or uses an “accent” color
for the Material components. The default values for component colors
are derived from the overall theme’s color scheme. The ColorScheme’s
secondary color is now typically used instead of accentColor and the
onSecondary color is used when a contrasting color is needed.
Also checkout the migration guide.
Regarding your appBar problem do this within the ThemeData():
appBarTheme: AppBarTheme(backgroundColor: Colors.white),
This appears to be a regression: https://github.com/flutter/flutter/issues/89839.
Nowhere on the Flutter site does it say that primaryColor has been deprecated.
Related
I am (very) new to Flutter, so please go easy on me. 😊 I'm using Flutter 3 and Dart 2.17.
I am making a web app and am trying to set up the color scheme for my app. In CSS, I'd normally do something like this to define a set of colors for light and dark mode:
:root {
--alpha: #FFF;
--bravo: #F5F5F6;
}
#media (prefers-color-scheme: dark) {
--alpha: #222630;
--bravo: #171920;
}
I've read about Flutter's ThemeData, and as I understand it, it's a big list of styles so that if I were making an Android app, I'd have some sensible defaults for various pieces of the mobile UI. But since I am making a web app that has a fully custom UI, it feels like a lot of extra stuff I don't want.
What is a good way to define a bunch of color names and have them automatically switch their values when I switch between light and dark mode? Should I still use ThemeData? Or is there a simpler way when my UI is custom?
I'm hoping for something like this (this probably isn't valid Dart; I'm still learning):
//My view
Container(color: MyColors.alpha)
...and the values are read somewhere like this:
//Some other class
class MyColors {
final alpha = darkMode ? const Color(0XFF222630) : const Color(0xFFFFFFFF);
final bravo = darkMode ? const Color(0xFF171920) : const Color(0xFFF5F5F6);
}
Has anyone done something like this?
I'd suggest you use an #observable ThemeMode themeMode variable (read about the mobx state management here https://pub.dev/packages/mobx) to change the state of your whole widget tree starting from MaterialApp when the user changes the app theme, for example
themeMode: themeMode != null
? _controller.themeMode!
: WidgetsBinding.instance.window.platformBrightness == Brightness.light
? ThemeMode.light
: ThemeMode.dark,
and still use ThemeData to set which colors you want your components to use, like this
darkTheme: ThemeData(
scaffoldBackgroundColor: MyColors.alphaDark,
backgroundColor: MyColors.alphaDark,
cardColor: MyColors.alphaDark,)
theme: ThemeData(
scaffoldBackgroundColor: MyColors.bravoLight,
backgroundColor: MyColors.bravoLight,
cardColor: MyColors.bravoLight,)
class MyColors {
final alphaDark = const Color(0XFF222630);
final bravoLight = const Color(0xFFF5F5F6);
}
Container(color: Theme.of(context).cardColor)
And you can always create a custom ThemeData so you can call your components whatever you want
I am using flutter 2.5.2 and primaryColor is not working for me, I want to use hexcode of color, what am I doing wrong here,
import 'package:flutter/material.dart';
import 'input_page.dart';
void main() => runApp(BMICalculator());
class BMICalculator extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
primaryColor: Color(0xFFCF3D10),
),
home: InputPage(),
);
}
}
This is caused by a transition(WIP) to ColorSchemes for theming. You can read about it here:
https://github.com/flutter/flutter/issues/89839#issuecomment-919437144
IMO ColorSchemes are not yet complete, you can use primarySwatch property of ThemeData to do what you're trying to achive.
Thanks to #mayank for the issue link, from reading all the comments from this official issue link I noticed
They did this intentionally as part of Theme System cleanup and to make everything more consistent and based off the ColorScheme colors.
Flutter team has mentioned clearly that they will eventually be moving all components away from ThemeData.primaryColor
and this can be fixed by providing a color scheme with the same primary color that you desire:
theme: ThemeData(
primaryColor: ColorsX.primary,
colorScheme: ColorScheme.light().copyWith(primary: ColorsX.primary),
);
for me this was the solution :
theme: ThemeData.dark().copyWith(
colorScheme: ColorScheme.light(primary: Color(0xffcf3d10)),
Now the things works as intdended for me.
I was following a YouTuber step by step creating this project but when I want to change the 'ThemeData primary colors' It just won't change and still remain the default color which is light blue. Here is a screenshot of it
According to AppBar description, it uses ColorScheme.primary by default.
The default app bar [backgroundColor] is the overall theme's
[ColorScheme.primary] if the overall theme's brightness is [Brightness.light]. Unfortunately this is the same as the default
[ButtonStyle.foregroundColor] for [TextButton] for light themes.
In this case a preferable text button foreground color is
[ColorScheme.onPrimary], a color that contrasts nicely with
[ColorScheme.primary]. to remedy the problem, override
[TextButton.style]:
try using colorScheme
MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSwatch(
primarySwatch: Colors.purple,
),
),
home: MyApp(),
),
And to use somewhere else
Theme.of(context).colorScheme.primary,
For more, visit ThemeData-class
Can Anybody tell me how the change the color of this statusbar into other colors. As you can see in the following image it's a dark color and the time, battery, network details also shown in dark. so that's making them invisible.
I either want to change the color dynamically like when the background color becomes dark the text color of the system widgets ( time , battery, network) becomes white and when color is light those becomes dark.
or If I have to hardcode the color each time. where should I do it? Any solution will be appreciable.
this package: https://pub.dev/packages/flutter_statusbarcolor
import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
FlutterStatusbarcolor.setStatusBarColor(Colors.white);
return MaterialApp(
title: "Flutter",
theme: ThemeData(
primarySwatch: Colors.grey,
),
home: HomeScreen(),
);
}
}
I found how to achieve this in flutter built in functions.
in MaterialApp go inside theme
create AppBarTheme and give the property brightenss: Brightness.dark or Brightness.light based on your requirement. If your status bar color is dark then give Brightness.dark it will make icons and text in white color and vice versa for light background.
Currently, I set background color of each screen using this:
#override
Widget build(BuildContext context) => Scaffold(
backgroundColor: Colors.white,
body: ...
);
Every time I create new screen, I always forgot to add this background color setter. This is a minor inconvenience, but I really appreciate if there's a method to set this background color once for all screens, unless overridden by backgroundColor property of specific Scaffold. I have tried to set the color on MaterialApp's color property, but it doesn't look like it has any effect.
You should pass custom ThemeData with background color parameter overwritten to you MaterialApp, so this will do the trick:
return MaterialApp(
// your other app initialization code
theme: ThemeData(scaffoldBackgroundColor: Colors.white),
);
You can read more about ThemData and flutter app theming in the official documentation
https://flutter.dev/docs/cookbook/design/themes