how to change color of text and icons on appbar flutter

user_12559701 0
Viewed 3693

I am having problem while changing the color of text and icon widgets on appbar in flutter.

I have tried theme inside the material app but it's not working.

where this is working : title: Text('Profile', style: TextStyle(color: Colors.black)), But I want to apply this for all appbars. So where should I make changes in material theme.

MaterialApp(
          title: "My App",
          theme: ThemeData(
            appBarTheme: AppBarTheme(
              backgroundColor: Color(0xffFCD581),
              brightness: Brightness.dark,
            ),

enter image description here

how can i change the color of text: profile and icon . globally.

setting color of headline6 to Colors.black works. but it's also making the title text smaller. I can set the fontsize in headline6 and it reflects universally. But I think the default size of title that we get with appbar is suitable enough. So is there any solution that will only change the color of the appbar text, title without affecting the fontsize.

dart flutter
3 Answers

Use IconButton as the back button and assign color, for Title use TextStyle and assign a color.

1. Using AppBar:

Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        leading: IconButton(
          icon: Icon(Icons.arrow_back, color: Colors.red),
          onPressed: () => Navigator.of(context).pop(),
        ),
        title: Text("Sample", style: TextStyle(color: Colors.red),),
        centerTitle: true,
      ),

2. Using ThemeData:

theme: ThemeData(
    primaryTextTheme: TextTheme(
      headline6: TextStyle(color: Colors.red),
    ),
    appBarTheme: AppBarTheme(
      iconTheme: IconThemeData(color: Colors.red),
    ),
  ),

Output:

enter image description here

user_51065740

Use the iconTheme and titleTextStyle properties of your AppBarTheme in your MaterialApp widget.

user_136464300

Here is how to change the color of text and icons:

   return Scaffold(
      appBar: AppBar(
        leading: null,
        automaticallyImplyLeading: true,
        centerTitle: true,
        iconTheme: IconThemeData(color: myCustomIconColor), //ICONS
        titleTextStyle: GoogleFonts.lato(
           textStyle: TextStyle(
           fontSize: 23,
           fontWeight: FontWeight.w700,
           color: myCustomTextColor,    //TEXT
         ),
        ),
        title: Text('Settings'),
      ),

Or you can style the Text widget directly and change the color there

user_14768290
Related