Can someone briefly explain to me where are all the three themes(Primary Swatch, accent Color and canvas Color) used in flutter?
I find extensive use of these themes but am very confused which widgets use which theme?
primarySwatch: is a main color of app for example it change the color of appbar
accentColor: or secondary color is The foreground color for widgets for example floatingActionButton
canvasColor: and this can change the color of scaffold widget
You first need to learn Material Design to understand them. Check this.
primarySwatch is a MaterialColor, not a color. See this.
accentColor is a secondary color. It might be used for active tab, focused input texts, checked boxes etc.
canvasColor is the default color of MaterialType.canvas Material. Here.
Related
The description says like below and its not ENOUGH!!!! and I am tired!!
ColorScheme is a set of 25 colors based on the Material spec that can be used to configure the color properties of most components.
The main accent color groups in the scheme are primary, secondary, and tertiary.
I'd like to know which color applied to which component in flutter
For example,
The primary color is applied to FloatingActionButton like that!
Well, as it says, Flutter follows the Material design system and color scheme, so you can know what widgets and elements those colors are used from the official Material design website, check it:
https://m2.material.io/design/color/the-color-system.html
I have theme designed in Appainter. I have access to a lot of colors from this theme using:
Theme.of(Get.context!).colorScheme.onError
but not every color I can find in color scheme. How to get for example Primary color light? Some of colors from appainter is not listed in colorScheme
primaryColorLight is not available in colorScheme. You can access it directly from theme context
Theme.of(context).primaryColorLight
I'm making a Welcome Screen which has two TextButtons each wrapped in a Container.
one for Creating an account and another for logging in
(both of them have some shadow below them )
I managed to make both containers in flutter but I found out that the background color of the application is not pure white (#FFFFFF) which mean if I set the color of the login container to Colors.white it won't look like the background color of the app like above picture.
So I need a way to set the color of the login container to the same color as the application.
let's avoid hard coding I don't want to determine the background color with an external tool and set it to the button.
I was thinking of taking same color as parent or something like that but I don't know if that exists.
main.dart
WelcomeScreen.dart
The scaffold background color is Grey[50]. You can set background color on scaffold like
Scaffold(
backgroundColor: Colors.white,
Or for app
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: Theme.of(context).copyWith(
scaffoldBackgroundColor: Colors.white,
),
More about Theme.
Using Getx for theming, but facing some issue with changing status bar icon brightness based on light / dark theme.
I found two ways.
First.
WidgetsBinding.instance!.addPostFrameCallback((_) {
SystemChrome.setSystemUIOverlayStyle(overlayStyle);
});
This need to be called during initState().
Second.
AnnotatedRegion<SystemUiOverlayStyle>()
This widget also does work properly.
Is there any other method which can be implemented for this purpose?
P.S. Using Flutter 2.8.0
You can use ThemeData to change brightness of the whole app based on dark/bright.
All your themes customisation can be done using this. Below is an example for brightness and primary color.
ThemeData(
brightness: Brightness.dark, // or Brightness.light (for dark or light)
// .........
primarySwatch: Colors.orange, // for changing primary color
),
I'm using the following theme code:
ThemeData.dark().copyWith(
accentColor: Colors.green,
textSelectionColor: Colors.green.withOpacity(0.5),
textSelectionHandleColor: Colors.green,
);
And that works for android, but for iOS it is not changing the color of the text selection handle color to green (it is still the default blue). How can I change that color for iOS?
I was able to change the color using Themes. You need to set cupertinoOverrideTheme like this
CupertinoThemeData(
primaryColor: Colors.green,
)
it seems that this is a known issue.
It would appear that TextField on iOS ignores the MaterialTheme values for this.
Another piece of information which suggests that this is not possible in iOS is looking at the CupertinoThemeData documentation, which clearly does not consider a textSelectionHandleColor.