Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I use google fonts on defining a theme in flutter

I am new to flutter.

I installed this library to be able to use google fonts.

Now I need to do it in the theme data definition, and tried like this but it's not allowed

ThemeData appTheme() {
  return ThemeData(
    ...
    fontFamily: GoogleFonts.openSans(),
  );
}

How do I do this? Thank you very much

like image 420
user3808307 Avatar asked Oct 08 '20 22:10

user3808307


2 Answers

Reposting my comment: fontFamily expects a String. Use GoogleFonts.openSans().fontFamily.

like image 166
Riwen Avatar answered Oct 05 '22 22:10

Riwen


Paste the code below in your theme file, and add it to your ThemeData(textTheme: textTheme)

final TextTheme textTheme = TextTheme(
  headline1: GoogleFonts.roboto(
      fontSize: 97, fontWeight: FontWeight.w300, letterSpacing: -1.5),
  headline2: GoogleFonts.roboto(
      fontSize: 61, fontWeight: FontWeight.w300, letterSpacing: -0.5),
  headline3: GoogleFonts.roboto(fontSize: 48, fontWeight: FontWeight.w400),
  headline4: GoogleFonts.roboto(
      fontSize: 34, fontWeight: FontWeight.w400, letterSpacing: 0.25),
  headline5: GoogleFonts.roboto(fontSize: 24, fontWeight: FontWeight.w400),
  headline6: GoogleFonts.roboto(
      fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0.15),
  subtitle1: GoogleFonts.roboto(
      fontSize: 16, fontWeight: FontWeight.w400, letterSpacing: 0.15),
  subtitle2: GoogleFonts.roboto(
      fontSize: 14, fontWeight: FontWeight.w500, letterSpacing: 0.1),
  bodyText1: GoogleFonts.roboto(
      fontSize: 16, fontWeight: FontWeight.w400, letterSpacing: 0.5),
  bodyText2: GoogleFonts.roboto(
      fontSize: 14, fontWeight: FontWeight.w400, letterSpacing: 0.25),
  button: GoogleFonts.roboto(
      fontSize: 14, fontWeight: FontWeight.w500, letterSpacing: 1.25),
  caption: GoogleFonts.roboto(
      fontSize: 12, fontWeight: FontWeight.w400, letterSpacing: 0.4),
  overline: GoogleFonts.roboto(
      fontSize: 10, fontWeight: FontWeight.w400, letterSpacing: 1.5),
);

This video explains very well how to use themes and fonts in flutter https://youtu.be/stoJpMeS5aY?t=640

like image 30
Luiz Avatar answered Oct 05 '22 22:10

Luiz