How to change font family of app bar universally in flutter?

Question

I want to change app bar font in my application universally but I did not find any appropriate answer I was looking for.
Is there any way to apply theme globally using ThemeData and theme in MaterialApp?

I don't want to apply TextStyle property like below

appBar: AppBar(
            title: Text('Title ',style: TextStyle(fontFamily: 'YOUR_FONT_FAMILY'),
            ),
          ),

If not, what is the best way to change the app bar font?

P.S. This is my first post on StackOverflow.

Balaji Venkatraman · Answer 1 · 2020-12-28T16:08:46.030

0

You should use AppBarTheme.Please find the below code

In MaterialApp use like this,

MaterialApp(
      title: 'Test App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          textTheme: ThemeData.light()
              .textTheme
              .copyWith(
                headline6: TextStyle( // instead of title use can use display as well
                  fontFamily: 'Lobster',
                ),
              )
              .apply(
                fontFamily: 'Lobster',
              ),
        ),
      ),
    );

AppBar(
      title: Text('App bar', 
                 style: Theme.of(context).appBarTheme.textTheme. headline6,
             ),
    );

edited Dec 28 '20 at 16:08

answered Dec 28 '20 at 15:39

Balaji Venkatraman

1,228
12
19

This is not working. Also instead of creating new AppBarTheme(), can't we just use Theme.of(context).appBarTheme.copywith({}) ? – DhrumilShah98 Dec 28 '20 at 15:50
This is also possible.It Should work.Also which font family you are using and have you configured it in pubspec.yaml file – Balaji Venkatraman Dec 28 '20 at 15:52
Yes, it is configured in pubspec.yaml file and font family is 'Lobster'. I am able to change it, but I want to change it universally. – DhrumilShah98 Dec 28 '20 at 15:57
Got it.Please check the updated code that i added just now in MaterialApp.Hope That works – Balaji Venkatraman Dec 28 '20 at 15:58
I found that headline6 is used for primary text in app bars and dialogs. Source: https://api.flutter.dev/flutter/material/TextTheme/headline6.html So I configured it like this and it worked ``` appBarTheme: Theme.of(context).appBarTheme.copyWith( textTheme: Theme.of(context).textTheme.copyWith( headline6: TextStyle( fontSize: 24, fontFamily: 'Lobster', ),),), ``` I did not have to use light() or dark(). This might be correct. – DhrumilShah98 Dec 28 '20 at 16:08
Cool.But this will not applied globally.You have to use it like the code that i posted – Balaji Venkatraman Dec 28 '20 at 16:09

score 0 · Answer 2 · answered Feb 13 '22 at 10:11

appBarTheme: AppBarTheme(
      textTheme: ThemeData.light().textTheme.copyWith(
            headline6: TextStyle(
              fontFamily: 'OpenSan',
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
    ),

After calling Theme.of(), I got error "the receiver can be null...." and got fixed by putting the "!" in the below code

title: Text(
      'Title Text',
      style: Theme.of(context).appBarTheme.textTheme!.headline6,
    ),

How to change font family of app bar universally in flutter?

2 Answers2