flutter_custom_fonts download - flutter_custom

flutter_custom_fonts

Schriftarten herunterladen

1.0.0

Herunterladen

flutter_custom_fonts

So fügen Sie benutzerdefinierte Schriftarten in Flattern hinzu

Einführung:

In diesem Artikel erfahren wir, wie Sie benutzerdefinierte Schriftarten in Flutter -Anwendung hinzufügen. Wir werden in diesem Beispiel .ttf -Schriftarten hinzufügen. Google -Schriftarten bieten kostenlose Schriftarten, sodass wir von dort aus Schriftarten herunterladen. Wir werden in diesem Beispiel Pacifico- und Robotoconden -Schriftarten hinzufügen. Fügen wir also im folgenden Beispiel benutzerdefinierte Schriftarten in der Flutter -App hinzu.

Ausgabe:

Schritte:

Schritt 1: Erster und grundlegender Schritt, um eine neue Anwendung in Flutter zu erstellen. Wenn Sie ein Anfänger in Flattern sind, können Sie meinen Blog überprüfen. Erstellen Sie eine erste App in Flutter. Ich habe eine App mit dem Namen "flutter_custom_fonts" erstellt.

Schritt 2: Laden Sie nun Schriftarten von Google -Schriftarten oder von einer anderen Website herunter und setzen Sie das FONT -Projekt ein. Erstellen Sie einen Ordner mit dem Namen "Schriftarten" im Projekt Root Directory und geben Sie die Schriftarten in diesen Ordner ein. Weitere Verständnis finden Sie unter dem Screenshot.

Schritt 3: Konfigurieren Sie nun die Schriftarten in PubSpec.yaml -Datei. PubSpec.Yaml -Datei ist eine Konfigurationsdatei für Plugins, Schriftarten, Bilder usw.. Schauen Sie sich den folgenden Code an, den Sie in Ihrer Datei pubSpec.yaml konfigurieren müssen.

 fonts:
   - family: Pacifico
     fonts:
       - asset: fonts/Pacifico-Regular.ttf
   - family: RobotoCondensed
     fonts:
       - asset: fonts/RobotoCondensed-Regular.ttf
       - asset: fonts/RobotoCondensed-Bold.ttf
         weight: 700

Schritt 4: Jetzt in der Main.Dart -Datei werden wir die Schriftarten verwenden, um unseren Text zu stylen. Nachfolgend finden Sie die Programmierung implementiert.

 import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     theme: ThemeData(
       primarySwatch: Colors.purple,
     ),
     home: MyHomePage(),
   );
 }
}
 
class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('Flutter Custom Fonts'),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text(
             'Pacifico Regular',
             style: TextStyle(
                 fontFamily: 'Pacifico', fontSize: 32.0, color: Colors.purple),
           ),
           Text(
             'Pacifico Bold',
             style: TextStyle(
                 fontFamily: 'Pacifico',
                 fontWeight: FontWeight.bold,
                 fontSize: 32.0,
                 color: Colors.purple),
           ),
           Text(
             'RobotoCondensed Regular',
             style: TextStyle(
                 fontFamily: 'RobotoCondensed', fontSize: 32.0, color: Colors.purple),
           ),
           Text(
             'RobotoCondensed Bold',
             style: TextStyle(
                 fontFamily: 'RobotoCondensed',
                 fontWeight: FontWeight.w700,
                 fontSize: 32.0,
                 color: Colors.purple),
           ),
         ],
       ),
     ),
   );
 }
}

Hurrey…. Führen Sie die App aus und testen Sie sie auf Emulator/Simulator oder Gerät :)))

Abschluss:

Wir haben gelernt, wie man benutzerdefinierte Schriftarten in Flutter -Anwendung hinzufügt. Es gibt drei Schritte dafür. 1. Laden Sie die Schriftarten herunter und platzieren Sie in Schriftarten.