web-dev-qa-db-fra.com

Comment utiliser un style de police personnalisé dans Flutter?

J'ai déjà mis sur mon pubspec.yaml le code suivant:

fonts:
- family: Roboto
  fonts:
    - asset: fonts/Roboto-Light.ttf
    - asset: fonts/Roboto-Thin.ttf
    - asset: fonts/Roboto-Italic.ttf

Mais je ne sais pas utiliser, par exemple, le style "Roboto-Light.ttf" de Roboto dans mon widget. J'ai essayé ceci:

new ListTile(
          title: new Text(
            "Home",
            style: new TextStyle(
              fontFamily: "Roboto",
              fontSize: 60.0,
            ),
          ),
        ),

Je ne sais pas comment accéder au style "Roboto-Light.ttf". Comment faire ça?

Merci!

androidfontsdartflutter
6
Long Johnson

Roboto est la police par défaut du style Material, il n'est pas nécessaire de l'ajouter dans pubspec.yaml.

Pour utiliser les différentes variantes, définissez un TextStyle

Text(
  'Home',
  style: TextStyle(
    fontWeight: FontWeight.w300, // light
    fontStyle: FontStyle.italic, // italic
  ),
);

Je pense que mince est FontWeight.w200.

12
boformer

Déclarez et accédez à la police correctement.

Déclarez le chemin de la police dans le pubspec.yaml fichier.

Suivez l'indentation correcte.
Par exemple, j'ai ajouté le fichier IndieFlower-Regular.ttf à l'intérieur des polices dossier. C'est ainsi que mon pubspec.yaml le fichier ressemble.

flutter:

 uses-material-design: true

 fonts:
   - family: Indies
   fonts:
     - asset: fonts/IndieFlower-Regular.ttf

Accéder à la police dans TextStyle

style: TextStyle(
      color: Colors.green,
      fontSize: 30.0,
      fontFamily: 'Indies'
),

Pour une meilleure compréhension, voici l'image qui montre la police, pubspec.yaml et la sortie.

enter image description here

0
Rohit Singh

Remarque: ce n'est que si vous préférez utiliser les polices de fonts.google.com

L'une des façons les plus cool et les plus simples d'utiliser les polices google est d'utiliser le google_fonts_package .

Le package google_fonts pour Flutter vous permet d'utiliser facilement l'une des 960 polices (et leurs variantes) de fonts.google.com dans votre application Flutter. Avec le package google_fonts, les fichiers .ttf n'ont pas besoin d'être stockés dans votre dossier d'actifs et cartographié dans le pubspec. Au lieu de cela, ils sont récupérés une fois via http lors de l'exécution et mis en cache dans le système de fichiers de l'application.

Installation

  1. ajouter à pubspec.yaml
google_fonts: ^0.1.0
  1. importation
import 'package:google_fonts/google_fonts.Dart';
  1. utilisez votre police par exemple
Text("TestText", style:GoogleFonts.dancingScriptTextStyle(
              fontSize: 25,
              fontStyle: FontStyle.normal,
    )

Bien qu'il mentionne qu'il ne devrait pas être utilisé en production, mais je vois une application déployée à la fois playstore et appstore par Tim Sneath et fonctionne parfaitement ici le code open source j'espère que cela aide

0
maheshmnj