Udemyセール開催中! 対象コースが1,220円から

【Flutter】GoogleFontsの使い方|Googleフォントをアプリで使う

今回は外部パッケージを導入して使用できる「GoogleFonts」の基本的な使い方について紹介します。

GoogleFontsを使えばGoogleフォントで気に入ったフォントをアプリ内のテキストに使用できます!

目次

外部パッケージの導入

$ flutter pub add google_fonts
$ flutter pub get

pubspec.yamlにパッケージを追加・更新

import 'package:google_fonts/google_fonts.dart';

dartファイルにコピペ

下準備:Google Fontsで使用するフォントを決める

Google Fontsから使用したいフォントを選んで名前をメモしておきます。

GoogleFontsを使用しない場合

Textのデフォルトフォントがこちらです。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("GoogleFonts"),
        ),
        body: Center(
          child: Text(
            "Hello World",
            style: TextStyle(
              fontSize: 50,
            ),
          ),
        ),
      ),
    );

GoogleFontsの使い方

指定したテキストのみに適用(Textで指定)

指定したTextのみにフォントを使用したい場合は、TextのstyleプロパティでGoogleFontsを使用します。今回はGoogleFontsのstaticメソッド「acme(ドキュメントを確認)」を使用して「Acmeフォント」をTextに使用しています。

使用できるフォントの探し方、フォント名の書き方については後述しています。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("GoogleFonts"),
        ),
        body: Center(
          child: Text(
            "Hello World",
            style: GoogleFonts.acme(
                textStyle: TextStyle(
              fontSize: 50,
            )),
          ),
        ),
      ),
    );
  }

アプリ全体で適用(MaterialAppで指定)

アプリ全体のTextにフォントを使用するにはMaterialAppの「theme > ThemeData > textThemeプロパティ」で指定できます。

Acmeフォントを使用するにはGoogleFontsのstaticメソッド「acmeTextTheme」を使用します。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: GoogleFonts.acmeTextTheme(),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("GoogleFonts"),
        ),
        body: Center(
          child: Text("Hello World",
              style: TextStyle(
                fontSize: 50,
              )),
        ),
      ),
    );
  }

GoogleFontsで使用できるフォントを探す

「Command」を押しながらGoogleFontsをクリックすると「google_fonts.dart」が開き、使用できるフォントを確認できます。使用したいフォントがない場合はカスタムフォントで好きなフォントを使用できます。

以上です。

参考

  • URLをコピーしました!
目次
閉じる