flutter_custom_fonts下載flutter_custom

flutter_custom_fonts

字體下載

1.0.0

下載

flutter_custom_fonts

如何在顫音中添加自定義字體

介紹：

在本文中，我們將學習如何在Flutter應用程序中添加自定義字體。在此示例中，我們將添加.ttf字體。 Google字體提供免費字體，因此我們將從那裡下載字體。在此示例中，我們將添加Pacifico和Robotoconsens的字體。因此，在下面的示例中，讓我們在Flutter應用中添加自定義字體。

輸出：

步驟：

步驟1：在Flutter中創建新應用程序的第一和基本步驟。如果您是Flutter的初學者，則可以查看我的博客創建第一個應用程序。我創建了一個名為“ Flutter_custom_fonts”的應用程序。

步驟2：現在，從Google字體或其他站點下載字體，然後放置字體項目。在Project Root Directory下創建一個名為“字體”的文件夾，然後將字體放入該文件夾。在下面的屏幕截圖中查看以了解更多理解。

步驟3：現在在pubspec.yaml文件中配置字體。 pubspec.yaml文件是用於插件，字體，圖像等的配置文件。請查看下面的代碼，您需要在PubSpec.yaml文件中配置。

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

步驟4：現在在Main.dart文件中，我們將使用字體來樣式文本。以下是該程序的編程實施。

 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…。運行該應用並在模擬器/模擬器或設備上測試:)））））