Home > Enterprise >  how to add font family into in main.dart flutter
how to add font family into in main.dart flutter

Time:02-08

I'm new to flutter and struggling to add font family in my code..already updated my pubspec.yamal with OpenSans fonts.. now how to add font family into this main. dart material app widget??

fontFamily: "OpenSans",

Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: theme.copyWith(
        colorScheme: theme.colorScheme.copyWith(primary: Color(0xff075e54),secondary: Color(0xff128C7E),

        ),
      ),
      home: Homescreen(key: null),
    );
  }
}

CodePudding user response:

You can try this

theme: theme.copyWith(
        colorScheme: theme.colorScheme.copyWith(primary: Color(0xff075e54),secondary: Color(0xff128C7E)),
        textTheme: theme.textTheme.apply(fontFamily: "OpenSans"),
),

CodePudding user response:

Create a simple file for the theme like the one I created theme_util.dart and use it as follows.

return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: appTheme,
      home: Homescreen(key: null),
 );

theme_util.dart

ThemeData appTheme = ThemeData(
  backgroundColor: appColor.white,
  scaffoldBackgroundColor: appColor.white,
  appBarTheme: AppBarTheme(
      color: appColor.white,
      brightness: Brightness.light,
      textTheme: TextTheme().copyWith(headline6: titleStyle),
      iconTheme: IconThemeData(color: appColor.primaryColor)),
  fontFamily: 'Opensans',
  primaryColor: appColor.primaryColor,
  primaryColorDark: appColor.primaryDarkColor,
  primaryColorLight: appColor.primaryLight,
  accentColor: appColor.accentColor,
  brightness: Brightness.light,
  //primarySwatch: appColor.blue,
  visualDensity: VisualDensity.adaptivePlatformDensity,
  buttonTheme: ButtonThemeData(buttonColor: appColor.primaryColor),
);

enter image description here

CodePudding user response:

You can create a style file in your dart folder and use the font where ever you want like this way-text_styles.dart

class TextStyles {
  static TextStyle overline(
      {required BuildContext context, required Color color}) {
    return GoogleFonts.montserrat(
      textStyle: Theme.of(context).textTheme.overline?.copyWith(color: color),
    );
  }
}

and use it as-

TextStyles.overline(context: context, color: theme.textColor).copyWith(fontWeight: FontWeight.w900),

Note:if you use custom font you have to install the package from your pubspec.yaml.Example-

google_fonts:
  •  Tags:  
  • Related