【Flutter】Flutterのパッケージやフォントをダウンロードで、Googleフォントを使用する
Flutter

【Flutter】Flutterのパッケージやフォントをダウンロードで、Googleフォントを使用する

作成日:2022年05月01日
更新日:2022年05月01日

Flutter で Google フォントを使用します。

まずはパッケージである google_fonts を利用します。

ターミナルで、flutter pub add google_fontsを実行します。

さらにターミナルでflutter pub getを実行しましょう。

google_fonts をインポートしましょう。

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

Textの中に、styleGoogleFontsを設定します。

dart
Text(
'タップした回数が表示されます:',
style: GoogleFonts.,
),

Flutter で使用できる Google フォントの一覧を調べます。

Mac と Visual Studio Code を使用している場合、GoogleFonts を command キーを押しながらクリックします。

google_fonts.dart ファイルに移動しますので、asMap の下がフォントの一覧になります。

Google フォントのサイトのスタイル名と照らし合わせて検索してみてください。

今回は、Kosugi Maru を使いたいので、google_fonts.dart で Kosugi Maru を検索します。

image2

該当する場所の値の通り、スタイルを、GoogleFonts.kosugiMaru にします。

dart
Text(
'タップした回数が表示されます:',
style: GoogleFonts.kosugiMaru(),
),

フォントサイズなどを設定したい場合は、kosugiMaru の後の()に設定します。

dart
Text(
'タップした回数が表示されます:',
style: GoogleFonts.kosugiMaru(
fontSize: 36,
fontWeight: FontWeight.w700,
),
),

画面を確認すると、

image3

フォントが、Kosugi Maru へ変更されました。

Google フォントを Flutter 全体に反映させたい場合、themeで設定します。

dart
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
textTheme: GoogleFonts.kosugiTextTheme(),
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}

Text の style は、通常通り使用できます。

dart
Text(
'タップした回数が表示されます:',
style: TextStyle(
fontSize: 36,
fontWeight: FontWeight.w700,
),
),

image4

Google フォントのサイトにはフォントが存在するが、Flutter の google_fonts パッケージの一覧に存在しない場合、フォントをダウンロードし、使用することもできます。

今回は、BIZ UDPGothic を使用します。

image5

assets フォルダを作成し、さらに fonts フォルダを作成します。

BIZ UDPGothic フォントをダウンロードし、fonts フォルダに移動します。

image6

pubspec.yaml でfontsを設定します。

dart
fonts:
- family: BIZUDPGothic
fonts:
- asset: assets/fonts/BIZUDPGothic-Bold.ttf
- asset: assets/fonts/BIZUDPGothic-Regular.ttf

main.dart のthemefontFamifyを設定します。

dart
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
fontFamily: 'BIZUDPGothic',
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}

画面を確認すると、

image7

BIZ UDPGothic が反映されました。

© 2024あずきぱんウェブスタジオ