How do I set letterSpacing for whole app in Flutter?

Question

I am working with Flutter and I know that letterSpacing property is useful to give some spacing between letters.

I want to give it to the whole application, I mean wherever I wrote any text in application. I want to set 1.0 letter spacing to all the text.

Is there any way to do it?

You can try `textTheme`. Just experiment on the properties to set and observe which text changes (e.g. `bodyText2: const TextStyle(letterSpacing: 10,)`). — rickimaru, Mar 16 '21 at 09:17

glavigno · Answer 1 · 2021-03-16T09:57:42.227

You can define a TextTheme and set a custom TextStyle for each type of text (headline1, ...).

If no Theme is provided, Flutter defines a default one for you.

However you can override or extend the default and define the letterSpacing property. I show an example for headline1 and button below.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        textTheme: TextTheme(
          headline1: Theme.of(context)
              .textTheme
              .bodyText1
              .copyWith(letterSpacing: 1.0),
          button: Theme.of(context)
              .textTheme
              .button
              .copyWith(letterSpacing: 1.0),
        ),
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

I want it for all, not only for headline. That means it should cover Button Text too. — Pratik Butani, Mar 16 '21 at 09:23
You can also extend TextStyle of button. Please check my edited answer, I added some code. — glavigno, Mar 16 '21 at 09:52

score 0 · Answer 2 · answered Mar 16 '21 at 09:40

You can define a const DEF_TEXT_STYLE in a constants.dart file and then apply it whenever you want.

constants.dart

const DEF_TEXT_STYLE = const TextStyle(
    letterSpacing: 1.0);

You could apply in this way:

Text(
   'This is my text',
    style: DEF_TEXT_STYLE,
),

Remember to import your constants.dart file.

Otherwise you could overwrite all textTheme data similar to what @glavigno said:

Here you can see all the textTheme data available in flutter. DOCS

theme: ThemeData(
        textTheme: TextTheme(
          headline1: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          headline2: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          headline3: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          headline4: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          headline5: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          headline6: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          subtitle1: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          subtitle2: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          bodyText1: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          bodyText2: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          button: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          caption: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          overline: Theme.of(context)
              .textTheme
              .headline1
              .copyWith(letterSpacing: 1.0),
          
        ),
      ),

How do I set letterSpacing for whole app in Flutter?

2 Answers2