2
votes

Comment utiliser une police personnalisée avec une taille définie dans Flutter / Dart?

J'essaie d'utiliser color , fontWeight et fontFamily avec style: style.copyWith , le la police personnalisée que j'essaie d'utiliser est Vonique , je l'ai importée comme telle dans pubspec.yaml

Text('Login',
 style: style.copyWith(
   color: Colors.redAccent, fontWeight: FontWeight.bold, fontFamily: Vonique
),
),

Est-ce le bonne façon de l'importer?

J'ai essayé les deux était avec «» et sans «», je ne change toujours pas la police du texte.

Text('Login',
 style: style.copyWith(
   color: Colors.redAccent, fontWeight: FontWeight.bold, fontFamily: 'Vonique'
),
),

fonts:
       - family: Vonique
         fonts: 
           - assets: fonts/Vonique-64-Bold-Italic.ttf
           - assets: fonts/Vonique-64-Italic.ttf
           - assets: fonts/Vonique-64-Bold.ttf
           - assets: fonts/Vonique-64.ttf

Je veux que la police ressemble à celle ici https://www.dafont.com/vonique-64.font mais ça ne ressemble pas à celui-là.

flutter dart css fonts

0 commentaires

6 Réponses :

0
votes

Si vous souhaitez appliquer une police à un texte, vous n'utilisez pas la commande copyWith. Définissez simplement votre style à l'aide d'un nouveau style de texte.

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
     // Uncomment in phase 3 to apply white to text
    textTheme: Theme.of(context).textTheme.apply(
      bodyColor: Colors.white,
      displayColor: Colors.white
    ),
  ),
  home: HomeSingleFile(),
);

Si vous souhaitez appliquer du texte globalement, dans votre application matérielle, vous pouvez appliquer des modifications de texte globales en créant une copie du thème actuel et en appliquant de nouvelles propriétés comme ci-dessous.

Text('Login', style: TextStyle(fontFamily: 'Vonique',  fontWeight: FontWeight.bold))

Sur la même note, si vous avez un style existant que vous souhaitez appliquer avec quelques modifications supplémentaires, utilisez la méthode .apply au lieu de copyWith. p >

2 commentaires

D'accord, je n'ai pas non plus pu faire fonctionner TextStyle, c'est pourquoi j'ai utilisé style.copyWith, mais maintenant cela fonctionne. Il semble également que j'ai eu un autre style de texte interférant avec celui-ci, donc une suppression rapide a fonctionné. Merci encore.

@overdeveloping génial. Marquez ceci comme la bonne réponse pour que les autres développeurs sachent qu'elle est résolue.

0
votes

Pour définir une police personnalisée dans le champ de texte: (Utilisez-la avec des guillemets simples est la méthode appropriée)

flutter:
  fonts:
    - family: Vonique
      fonts:
        - asset: Vonique-64-Bold-Italic.ttf
          weight: 500

Pour définir une police personnalisée avec une taille de police: p>

Text(
  'I like custom fonts',
  style: TextStyle(
            fontFamily: 'Vonique',
            fontSize: 20.0,
         ),
);

Si vous souhaitez définir l'épaisseur de la police, vous pouvez la définir dans le fichier pubspec.yaml comme ci-dessous:

Text(
  'I like custom fonts',
  style: TextStyle(fontFamily: 'Vonique'),
);

0 commentaires

1
votes

N'oubliez pas d'arrêter le débogage de l'application et de redémarrer votre application. Si vous ne le faites pas, les modifications que vous apportez aux polices dans pubspec.yaml ne seront pas visibles avec Hot Reload ou même Hot Restart .

    Text("Planning",
         style: TextStyle(
         color: Color(0xFF43b3e0),
         fontFamily: "Source Sans Pro",  // <- Looks up the specified font in pubspec.yaml
         fontWeight: FontWeight.w700,    // <- uses the Bold font weight
         fontSize: 28.0),
    ),

La raison pour laquelle j'ai spécifié le poids sous chaque police est que cela fait que FontWeight.w400 par exemple fait référence à Regular et FontWeight.w900 code > en noir.

Voici comment je l'ai utilisé dans mon code:

    fonts:
      - family: Source Sans Pro
      fonts:
        - asset: fonts/SourceSansPro-Regular.ttf
        weight: 400
        - asset: fonts/SourceSansPro-SemiBold.ttf
        weight: 600
        - asset: fonts/SourceSansPro-Bold.ttf
        weight: 700
        - asset: fonts/SourceSansPro-Black.ttf
        weight: 900

1 commentaires

comme «android» dit que la bonne façon de spécifier la fontFamily est avec des guillemets simples mais les doubles fonctionnent aussi.

0
votes

Si nous utilisons le package google_fonts , alors .ttf Les fichiers n'ont pas besoin d'être stockés dans votre dossier de ressources et mappés dans pubspec. Au lieu de cela, ils sont récupérés une fois via HTTP au moment de l'exécution et mis en cache dans le système de fichiers de l'application.

Text(
  'This is Fonts',
  style: GoogleFonts.lato(
    textStyle: TextStyle(color: Colors.blue, letterSpacing: .5),
  ),
),

0 commentaires

0
votes

Définissez ceci dans pubspec.yaml

flutter:
  fonts:
  - family: Quicksand
    fonts:
    - asset: assets/fonts/Quicksand-Regular.ttf

0 commentaires

0
votes

Vous devez définir la famille en fonction de cela dans votre fichier pubspec.yaml, puis vous pouvez facilement utiliser des polices personnalisées dans votre code:

Text(
    "Some Text",
    overflow: TextOverflow.clip,
    maxLines: 1,
    style: TextStyle(
      fontFamily: 'roboto_bold',
      // The color must be set to white for this to work
      color: Colors.white,
      fontStyle: FontStyle.normal,
      fontWeight: FontWeight.w700,
      fontSize: 15,
    ),

puis utiliser ceci dans votre code comme ceci; -

fonts:
 - family: roboto_regular
   fonts:
     - asset: assets/fonts/Roboto-Regular.ttf
 - family: roboto_italic
   fonts:
     - asset: assets/fonts/Roboto-Italic.ttf
 - family: roboto_black
   fonts:
     - asset: assets/fonts/Roboto-Black.ttf
 - family: roboto_bold
   fonts:
     - asset: assets/fonts/Roboto-Bold.ttf
 - family: roboto_light
   fonts:
     - asset: assets/fonts/Roboto-Light.ttf

0 commentaires