This is a Sliver AppBar.
How can I change the color of the back arrow ?
BUT I don't want to set leading: Icon(Icons.arrow_back, color: Colors.red) since (I believe) that the Sliver AppBar has the nice property of adapting the lead icon depending on context.
wrap the SliverAppBar widget with Theme widget, and change primaryIconTheme color in ThemeData. Here's the code:
Theme(
data: ThemeData(
primaryIconTheme: IconThemeData(color: Colors.red)),
child: SliverAppBar(),
),
Related
I have a problem here I want to change color of textbutton from themedata but its not working. Here is my code :
darkTheme: ThemeData(
primaryColor:Colors.white,
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(primary: Colors.white),
)
),
and my button code :
TextButton(
style: TextButton.styleFrom(
primary: Theme.of(context).primaryColor,
textStyle: TextStyle(fontSize: 16),),
onPressed: (){}, child: Text("Hellosir",))
I can think of two problems why this is not working.
First, you want to access ThemeData defined in darkTheme, but your themeMode is not dark. So in MaterialApp add themeMode: ThemeMode.dark parameter as well.
Second, your button where you call Theme.of(context).primaryColor is inside same widget as your definition of Theme, and your context still doesn't have that data. So only context of children of current widget have this data. Solution would be to make a new widget with your button inside it, or wrap your button with Builder widget which have context inside its builder.
Your problem can be first, second or both.
i want to change the back button icon for whole app not by changing it individually on screens i am unable to find out any placeholder to change the icon in app bar theme
there is no option for icon in appBarTheme
appBarTheme: AppBarTheme(
elevation: 0,
systemOverlayStyle: SystemUiOverlayStyle(statusBarBrightness: Brightness.light),
titleTextStyle: Theme.of(context).textTheme.headline6,
color: Colors.transparent,
iconTheme: IconThemeData(color: dark3)),
Do like this.
If you are using Scaffold then under Scaffold in the appBar params there is one param called leading Icon. Change that and you'll get your desired icon as a Back Icon.
Scaffold(
appbar:AppBar(
leading:
//<put that type of icons/widget you want to use >
),
body:
//...
)
make a custom appbar like this and use this wherever you need.
AppBar customAppBar()=>AppBar(
leading: //<put that type of icons/widget you want to use >
//other params as per your requirement
);
I've made a basic theme for my app and set it in the MaterialApp widget
ThemeData(
primaryColor: Colors.black,
backgroundColor: Colors.grey.shade50,
scaffoldBackgroundColor: Colors.grey.shade50,
buttonColor: Colors.purple,
);
but it seems the theme is not being updated on MaterialAppshome
home: LoginScreen()
. the button nor the background (supposed to be black and gray) aint updating...
What is the correct way of doing this?
As per the docs:
Using a Theme
Now that you’ve defined a theme, use it within the widgets’ build() methods by using the Theme.of(context) method.
The Theme.of(context) method looks up the widget tree and returns the nearest Theme in the tree. If you have a standalone Theme defined above your widget, that’s returned. If not, the app’s theme is returned.
In fact, the FloatingActionButton uses this technique to find the accentColor.
Container(
color: Theme.of(context).accentColor,
child: Text(
'Text with a background color',
style: Theme.of(context).textTheme.headline6,
),
),
ExpansionTile(
title: Text('test'),
children: [Text('test expanded')],
),
In this simple test, when I click on the title to expand the widget, the original title text turns from black to grey. I'm not sure if this is a Theme issue (I tried changing every grey color to something bright) or is something that I can manage through ExpansionTile (don't see it in the hover menu).
I did find that I could explicitly state the text color should be black and then it stays constant. However, in my real world use case for this tile I have several Text widgets and don't want to have to color each one.
Any ideas on how to address this in one shot?
It is an animated color between accentColor & subtitle1 color. So, you can override theme like this.
Theme(
data: ThemeData(
accentColor: Colors.black,
textTheme: TextTheme(
subtitle1: TextStyle(color: Colors.black),
),
),
child: ExpansionTile(
title: Text('test'),
children: [Text('test expanded')],
),
),
I was trying to change the accentColor after copying the ThemeData.light(), then I have this sample screen with a FloatingActionButton
class Sample extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
)}}
Then in the main widget in main.dart to call runApp, if I set the ThemeData for the MaterialApp widget like this, The FloatingActionButton will have a color of orange.
theme: ThemeData(
accentColor: Colors.orange
)
but if I tried to inherit the color from the Themedata.light().copyWith, the FloatingActionButton will still have the color blue from the light theme.
theme: ThemeData.light().copyWith(
accentColor: Colors.orange
)
I was expecting the FloatingActionButton should have the orange color, because It inherit the light theme and override the accentColor.
this is a common problem in Flutter, but you can solve it for now by doing the following:
theme: ThemeData.light().copyWith(
floatingActionButtonTheme:
ThemeData.light().floatingActionButtonTheme.copyWith(
backgroundColor: Colors.orange,
),
),
if you used any other button you should do the same and overwrite it's Theme,
you can read more about the problem here Updating the Material Buttons and their Themes
and buttonColor not honored when using ThemeData.light().copyWith()
look,
I don't think that u can inherit the accent color using the ThemeData.copyWith(),but if u are sure to use ThemeData.copyWith() to change your floatingActionButton Color then u can do this in the following way,
theme:ThemeData.dark().copyWith(
textTheme:ThemeData.dark().textTheme.copyWith(
title :TextStyle( --your color and text configuratons here like color,font etc)
button: TextStyle(--do--),
...and so on....
)
)
configurations u want in your default text title will go inside the TextStyle of above title property and same for button
Now u can achieve this inside your FAB by using this,
color: Theme.of(context).textTheme.button.color,
by doing this u can get the color u set for the buttons inside the ThemeData.
If u force on getting the default accent color then u have to use
theme:ThemeData(
primaryColor: -----
accentColor : -----
)
this will allow u to use Default accent Color for FAB