flutter_custom_fontsダウンロードflutter_custom_fontsソースコードのダウンロード

flutter_custom_fonts

フォントのダウンロード

1.0.0

ダウンロード

flutter_custom_fonts

フラッターにカスタムフォントを追加する方法

導入：

この記事では、フラッターアプリケーションにカスタムフォントを追加する方法を学びます。この例では、.ttfフォントを追加します。 Googleフォントは無料のフォントを提供するので、そこからフォントをダウンロードします。この例では、PacificoおよびRoboTocondenesedフォントを追加します。以下の例では、フラッターアプリにカスタムフォントを追加しましょう。

出力：

ステップ：

ステップ1：Flutterで新しいアプリケーションを作成するための最初と基本的なステップ。あなたがFlutterの初心者なら、私のブログをチェックして、Flutterで最初のアプリを作成できます。「flutter_custom_fonts」という名前のアプリを作成しました。

ステップ2：ここで、Googleフォントまたは他のサイトからフォントをダウンロードして、フォントプロジェクトを配置します。プロジェクトルートディレクトリの下に「フォント」と呼ばれるフォルダーを作成し、そのフォルダーにフォントを入れます。詳細については、以下のスクリーンショットをご覧ください。

ステップ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),
           ),
         ],
       ),
     ),
   );
 }
}

ハリー…。アプリを実行して、エミュレータ/シミュレーターまたはデバイスでテストします:)））