サイトアイコン 【TechGrowUp】

Flutter開発入門15 フォントの使い方

Daichi Mizuno

はじめに

　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
fonts.google.com
 
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

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の使い方はこちらから。

Flutter開発入門12 UIスタイリング
Flutterを使ったアプリ開発でのスタイリング方法を解説。Text、Containerのスタイル設定から、テーマのカスタマイズ、レスポンシブデザインの実装まで、実践的なサンプルコードとともに紹介します。
techgrowup.net
2024.09.04
 
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を使えば、アプリ全体にカスタムフォントを適用することも可能です。このガイドを参考に、あなたのアプリに最適なフォントを導入してみてください。

モバイルバージョンを終了