CODEWITHSUNDEEP
flutterdart
Dhananjay Gavali
Dhananjay Gavali

Reputation: 251

how to change color of text and icons on appbar flutter

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.

Upvotes: 4

Views: 6652

Answers (3)

Andrej
Andrej

Reputation: 3225

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

 theme: ThemeData(
                iconTheme: IconThemeData(color: Colors.green),
                appBarTheme: AppBarTheme(color: Colors.green),
),

Upvotes: 0

GraSim
GraSim

Reputation: 4210

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

Upvotes: 0

Jitesh Mohite
Jitesh Mohite

Reputation: 34170

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

Upvotes: 9

Related Questions