Flutter: How to set line height property of text to ThemeData

user_5546443 0
Viewed 2251

How can I set the line-height globally inside ThemeData?

theme: ThemeData(
       brightness: Brightness.light,
       accentColor: myAccentColor,
       primaryColor: myPrimaryColor,
       fontFamily: 'Ubuntu',
       buttonTheme: ThemeData.light().buttonTheme.copyWith(
            buttonColor: myPrimaryColor,
            textTheme: ButtonTextTheme.primary,
            shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(5)),
       ),
       scaffoldBackgroundColor: myBackgroundWhite,
       cardColor: myBackgroundWhite,
       textSelectionColor: myGreyTextColor,
       cursorColor: myAccentColor,
       cupertinoOverrideTheme: CupertinoThemeData(
          primaryColor: myAccentColor,
       ),
       errorColor: myErrorColorRed,
)
flutter
1 Answers

We cant set the line-height (property name: height) directly from ThemeData.

The best practice for handling text style is by using material type system guidelines. See the section "Material Text Scale: Modernizing Flutter Text Theming" from here.

So then on global ThemeData, you can use

theme: ThemeData(
          brightness: Brightness.light,
          accentColor: flujoAccentColor,
          primaryColor: flujoPrimaryColor,
          fontFamily: 'FiraSans',
          textTheme: TextTheme(
              headline5: TextStyle(
                fontSize: 24.0,
                fontWeight: FontWeight.w700,
                fontStyle: FontStyle.normal,
              ),
              bodyText1: TextStyle(
                fontSize: 16.0,
                fontStyle: FontStyle.normal,
                letterSpacing: 0.5,
              ),
              bodyText2: TextStyle(
                fontSize: 14.0,
                fontStyle: FontStyle.normal,
                letterSpacing: 0.25,
                height: 1.5,
              ),
              subtitle1: TextStyle(
                fontSize: 16.0,
                fontStyle: FontStyle.normal,
                letterSpacing: 0.15,
              ),
              subtitle2: TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w400,
                fontStyle: FontStyle.normal,
              ),
              caption: TextStyle(
                fontSize: 12,
                fontWeight: FontWeight.w400,
                fontStyle: FontStyle.normal,
              ),
              overline: TextStyle(
                fontSize: 10,
                fontWeight: FontWeight.w400,
                letterSpacing: 0.25,
                height: 1.5,
                fontStyle: FontStyle.normal,
              )),

Like this and on a Text widget, apply it like:

Text(
    "Hello world!",
     style: Theme.of(context).textTheme.bodyText1.copyWith(color: Colors.teal,),
);
user_55464430
Related