【Flutter】GoogleFonts|GoogleフォントをTextに実装

今回はGoogleフォントをFlutterアプリに実装できるGoogleFontsを紹介します。

GoogleFontsを使用するにはgoogle_fontsパッケージが必要となります。

\ 世界最大級のオンライン学習サービス /

目次

事前準備|google_fontsの導入

flutter pub add google_fonts
import 'package:google_fonts/google_fonts.dart';

google_fontsを導入します。

GoogleFontsの使い方

Text(
  'Hello World',
  style: GoogleFonts.acme(
    fontSize: 50,
    color: Colors.brown,
  ),
),

GoogleFonts.〇〇の〇〇に使用したいGoogleフォント名を代入します。使用できるGoogleフォントは公式ドキュメントから確認できます。

TextStylefontSizecolorなどでフォントを装飾できます。

テーマフォントを変更

MaterialApp(
  theme: ThemeData(
    textTheme: GoogleFonts.acmeTextTheme(),
  ),
  home: Scaffold(
    appBar: AppBar(title: const Text('FlutterZero')),
    body: Center(
      child: Text(
        'Hello World',
        style: TextStyle(
          fontSize: 50,
          color: Colors.brown,
        ),
      ),
    ),
  ),
);

TextRichTextなどmaterial Widgetのデフォルトフォントを変更するにはGoogleFonts.〇〇TextThemeを使用します。

MaterialApp>theme>ThemeData>textThemeにアプリで使用したいGoogleフォントのテーマを渡します。

日本語フォントを使用する場合

GoogleFontsで対応していないGoogleフォント(日本語フォントなど)を使用したい場合は自分でカスタムする必要があります。

サンプルコード

import 'package:google_fonts/google_fonts.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: GoogleFonts.acmeTextTheme(),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('FlutterZero')),
        body: Center(
          child: Text(
            'Hello World',
            style: TextStyle(
              fontSize: 50,
              color: Colors.brown,
            ),
          ),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

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