Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set Fallback Font globally in Flutter

Tags:

flutter

In Flutter, I do set the fallback font on every single text widget like that:

Text('Sample, style:'TextStyle(fontSize: 22, fontFamilyFallback: ['AppleColorEmoji']))

I can set the text font in ThemeData as fontFamily , but not the fallback font.

Is there any alternative?

like image 303
Nicolas Degen Avatar asked Sep 03 '25 16:09

Nicolas Degen


1 Answers

The best way to define a general theme for a Flutter app is through the theme attribute of MaterialApp. You can do it like this:

MaterialApp(
  title: 'Sample App',
  theme: ThemeData(
    // Define the default brightness and colors.
    brightness: Brightness.dark,
    primaryColor: Colors.lightBlue[800],
    accentColor: Colors.cyan[600],

    // Define the default font family.
    fontFamily: 'Georgia',

    // Define the default TextTheme. Use this to specify the default
    // text styling for headlines, titles, bodies of text, and more.
    textTheme: const TextTheme(
      bodyText2: TextStyle(fontSize: 22, fontFamilyFallback: ['AppleColorEmoji']), // Default style for Material Text
      subtitle1: TextStyle(fontSize: 24, fontFamilyFallback: ['AppleColorEmoji']), // Define your own style of subtitle
    ),
  ),
  home: Scaffold(
      appBar: AppBar(title: Text('Sample title', style: Theme.of(context).textTheme.subtitle1)), // Use your default config like this
      body: Text('Sample content'), // Without style, it will use your bodyText2 config
  ),
);

Read more on Flutter's Theme here

Updated: To only set a fallback Font globally for your app, use the DefaultTextStyle at the root widget. For example:

Scaffold(
      body: DefaultTextStyle(
        style: TextStyle(fontFamilyFallback: ['AppleColorEmoji']),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text(
                'The first text',
              ),
            ],
          ),
        ),
      ),
    )

You can read more on the Text documentation here

The style argument is optional. When omitted, the text will use the style from the closest enclosing DefaultTextStyle.

like image 130
Bach Avatar answered Sep 05 '25 14:09

Bach