こんにちは、ゲームソリューション部のsoraです。
今回は、FlutterでGoogle Fontsを使ってフォントを変更してみた(google_fonts)ことについて書いていきます。
実装した画面
初期フォントからGoogle Fontsのフォントを使用したものに変更して表示します。
利用するパッケージやサイト
google_fonts
google_fonts | Flutter package
使用したバージョン:google_fonts 6.2.1
Google Fontsを利用するためのパッケージです。
assets内にフォントファイルが存在する場合はオフラインでも使用できますが、そうでない場合はHTTPで取得するためオフラインの場合は使用できません。
Google Fonts
Googleが提供しているWebフォントのサービスです。
世界中のフォントが存在して、全て無料で利用可能です。
Browse Fonts - Google Fonts
google_fontsパッケージを利用したフォント変更
textTheme
としてGoogle Fontsのフォントを指定するだけで、アプリ全体のフォントを変更することができます。
GoogleFonts
以降の部分については、GoogleFonts
をctrl(Macならcomand)
を押しながらクリックすることで、設定ファイルから探すことができます。
タイトルを表示一覧としているのは、デフォルトフォントの"覧"という漢字の表記に違和感があって、フォント変更をしようと思ったためです。(変化がわかりやすいです)
main.dart
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
// main
void main() {
runApp(
const MyApp(),
);
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.lightBlueAccent),
useMaterial3: true,
// textThemeでアプリ全体のフォントを変更する
textTheme: GoogleFonts.ibmPlexSansJpTextTheme(
Theme.of(context).textTheme,
),
),
home: const MyHomePage(),
);
}
}
var decorationTextStyle = const TextStyle(
fontSize: 60.0,
);
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text('表示一覧'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('ひらがな', style: decorationTextStyle),
Text('カタカナ', style: decorationTextStyle),
Text('漢字', style: decorationTextStyle),
Text('English', style: decorationTextStyle)
],
),
),
);
}
}
フォントファイルをダウンロードしてフォント変更
アプリの本番リリース時には、通信ができない場所でもフォントを使用できるように、assetsとしてフォントファイルを含めてフォントを変更します。
Google Fontsから好きなフォントを選択してダウンロードして、ttfファイルやotfファイルをassetsフォルダに配置します。
pubspec.yaml
でフォントを読み込むことで使用できます。
pubspec.yaml
## 抜粋
flutter:
uses-material-design: true
fonts:
- family: Noto Sans JP
fonts:
- asset: assets/fonts/NotoSansJP-Regular.ttf
## 抜粋
main.dart
// 抜粋
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.lightBlueAccent),
useMaterial3: true,
// フォントの指定
fontFamily: 'Noto Sans JP'
),
home: const MyHomePage(),
);
}
}
// 抜粋
参考にしたページ
【Flutter】Google fontsを使ってみる
【Flutter】カスタムフォントの導入方法
最後に
今回は、FlutterでGoogle Fontsを使ってフォントを変更してみた(google_fonts)ことを記事にしました。
どなたかの参考になると幸いです。