kosaku
kosaku

Reputation: 93

Cannot apply AppBar titleTextStyle on the title Text Widget

I can't change my AppBar title text color using AppBar titleTextStyle. I know I can set the AppBar title style in some ways like using style in textWidget or set the textTheme in AppBar, but I just wanna know why it cannot be changed by setting titleTextStyle.

The code is below. AppBar title is still white though setting the titleTextStyle and the foregroundColor.

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        foregroundColor: Colors.black,
        titleTextStyle: TextStyle(color: Colors.black),
        title: const Text('AppBar Color'),),
      body: const Center(
        child: Text('sample'),
      ),
    );
  }
}

Upvotes: 8

Views: 12103

Answers (4)

Khaled Mahmoud
Khaled Mahmoud

Reputation: 343

You can add this style to the AppBarTheme

 appBarTheme: AppBarTheme(
backgroundColor: Colors.yellow,
titleTextStyle: TextStyle(color: Colors.black,fontSize: 20),
backwardsCompatibility: false,)

Upvotes: 0

DJafari
DJafari

Reputation: 13535

i know this question is for 1 month ago, but answer to this question is :

using backwardsCompatibility: false, for AppBarTheme

appBarTheme: AppBarTheme(
  backwardsCompatibility: false,
  titleTextStyle: TextStyle(
    color: Colors.red,
  ),
),

or antother way :

appBarTheme: AppBarTheme(
  textTheme: TextTheme(
    headline6: TextStyle(
      color: Colors.red,
    )
  )
),

Upvotes: 12

Adithaz
Adithaz

Reputation: 419

I think you need to remove const for the title

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        foregroundColor: Colors.black,
        titleTextStyle: TextStyle(color: Colors.black),
        title: Text('AppBar Color'),
      ),
      body: const Center(
        child: Text('sample'),
      ),
    );
  }

Upvotes: 1

Sanjib Sinha
Sanjib Sinha

Reputation: 1

If you only want to change the AppBar title Text color, then this might help you:

appBar: AppBar(
        title: Text(
          'To Do List',
          style: TextStyle(color: Colors.black),
        ),
      ),

enter image description here

Upvotes: 0

Related Questions