CODEWITHSUNDEEP
flutter
user18122363
user18122363

Reputation:

how to add font family into in main.dart flutter

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),
    );
  }
}

Upvotes: 2

Views: 2797

Answers (3)

Tanvir Ahmed
Tanvir Ahmed

Reputation: 682

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:

Upvotes: 0

DholaHardik
DholaHardik

Reputation: 502

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

Upvotes: 0

Taz
Taz

Reputation: 1981

You can try this

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

Upvotes: 1

Related Questions