Usare custom fonts in Flutter

Mattepuffo's logo
Usare custom fonts in Flutter

Usare custom fonts in Flutter

In questo articolo vediamo come usare dei font custom in Flutter.

Ovviamente dovete caricarli nel progetto, e sono supportati i seguenti formati (almeno ad oggi):

  • ttf
  • otf
  • ttc

Io ho creato un cartella assets nella root del progetto, ed all'interno una cartella fonts dove mettere i vari files.

Fatto questo, dobbiamo indicare nel pubspec.yaml dove trovarli:

flutter:

  uses-material-design: true

  fonts:
    - family: Raleway
      fonts:
        - asset: assets/fonts/Raleway-Regular.ttf
        - asset: assets/fonts/Raleway-Bold.ttf
          weight: 700

Come vedete nel secondo font abbiamo anche indicato il parametro weight; per chi conosce i CSS sa di cosa di parlo.

Infine indichiamo il font da usare nel codice:

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MP Book',
      theme: ThemeData(
        fontFamily: 'Raleway',
        brightness: Brightness.dark,
        primaryColor: Colors.amber,
        primarySwatch: Colors.amber,
        textTheme: const TextTheme(
          headline6: TextStyle(fontWeight: FontWeight.bold),
          bodyText1: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.purple,
            foregroundColor: Colors.white,
          ),
        ),
      ),
      home: const MyHomePage(),
    );
  }
}

Enjoy!


Condividi su Facebook

Commentami!