はじめに

　Flutterでは、カスタムフォントを簡単に導入することができます。デフォルトのフォントを変更することで、アプリケーションのデザインを一層引き立て、ユーザーにユニークな体験を提供できます。本記事では、Flutterでカスタムフォントをアプリに追加する方法について詳しく解説します。これをマスターすれば、あなたのアプリに独自のスタイルを加えることができるようになります。

カスタムフォントを使用する理由
カスタムフォントの追加手順
まとめ

カスタムフォントを使用する理由

　カスタムフォントを使用することで、アプリ全体のトーンや雰囲気をコントロールし、ブランドアイデンティティを強化することができます。デフォルトフォントも良いですが、カスタムフォントを使うことで、他のアプリとは一線を画すデザインを提供できます。

カスタムフォントの追加手順

　Flutterでカスタムフォントを使用するには、以下の手順に従います。

1. フォントファイルをプロジェクトに追加する

　まず、使用したいフォントファイル（通常は.ttfや.otf形式）を用意します。このファイルをFlutterプロジェクトのassets/fonts/ディレクトリに保存します。assets/fonts/ディレクトリが存在しない場合は、新しく作成してください。

2. pubspec.yamlファイルを編集する

　次に、プロジェクトのルートにあるpubspec.yamlファイルを編集して、フォントファイルをFlutterに認識させます。以下のように設定を追加します。ttfファイルは以下からダウンロード可能です。

Google Fonts

Making the web more beautiful, fast, and open through great typography

flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf
        - asset: assets/fonts/Roboto-Bold.ttf
          weight: 700
        - asset: assets/fonts/Roboto-Italic.ttf
          style: italic

family: フォントファミリーの名前を指定します。この名前を使ってテキストスタイルを適用します。
asset: フォントファイルのパスを指定します。
weight: フォントの太さ（オプション）を指定します。例えば、700はボールド（太字）を意味します。
style: フォントのスタイル（オプション）を指定します。例えば、italicは斜体を意味します。

3. テキストウィジェットでカスタムフォントを使用する

　フォントをpubspec.yamlに登録したら、Textウィジェットでそのフォントを使うことができます。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Custom Font Example'),
        ),
        body: const Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                'これはRobotoフォントです',
                style: TextStyle(fontFamily: 'Roboto', fontSize: 24),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

　この例では、Robotoという名前で登録したカスタムフォントを使用しています。TextStyleのfontFamilyプロパティで指定するだけで、簡単にカスタムフォントを適用できます。

4. アプリ全体にフォントを適用する

　個々のテキストウィジェットに対してフォントを適用するだけでなく、ThemeDataを使ってアプリ全体にカスタムフォントを適用することも可能です。Themeの使い方はこちらから。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: const TextTheme(
          bodyLarge: TextStyle(fontFamily: 'Roboto', fontSize: 18),
          bodyMedium: TextStyle(fontFamily: 'Roboto', fontSize: 16),
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Global Font Example'),
        ),
        body: const Center(
          child: Text('This text uses the Roboto font throughout the app'),
        ),
      ),
    );
  }
}

　この例では、ThemeDataのtextThemeをカスタマイズして、アプリ全体でRobotoフォントを使用しています。これにより、すべてのテキストウィジェットに一貫したスタイルが適用されます。

まとめ

　カスタムフォントを使用することで、Flutterアプリに独自性を加え、ユーザーにとっての視覚的な印象を大きく変えることができます。フォントの追加は非常に簡単で、pubspec.yamlに設定を追加し、テキストウィジェットで使用するだけです。また、ThemeDataを使えば、アプリ全体にカスタムフォントを適用することも可能です。このガイドを参考に、あなたのアプリに最適なフォントを導入してみてください。