PCロール

PCロール

【Flutter】フォントを可愛くしたい！

【Flutter】フォントを可愛くしたい！

Flutter プロジェクトで、可愛いフォントを使いたい！

アプリを作っていると、自分なりの個性あるアプリを作りたくなりますよね。

中でも、フォントはお手軽にアプリに個性をつけることができます！

今回は、Flutter でフォントを適用する方法を解説します！

可愛いフォントの一つに、Kiwi Maru というフォントがあります。

使ってみるとこんな感じ。

フォント

とてもかわいいですね！

Kiwi Maru フォントについての詳細はこちらです。

https://f-font.com/jp/kiwimaru

では、実装に進みましょう！

Kiwi Maru は Google Fonts の中に含まれていますので、Google Fonts パッケージを使用して実装することができます！

以下に実装の手順を示します。

  1. Google Fonts パッケージを依存関係に追加する。
  2. フォントを適用する設定を行う。

たったの 2 手順です！カンタンですね 🎶

では順番に見ていきましょう！

1. Google Fonts パッケージを依存関係に追加する

pubspec.yamlファイルに以下の依存関係を追加します。

dependencies:
  flutter:
    sdk: flutter

  google_fonts: ^6.2.1 #バージョンは変わっている可能性があります。

これで完了です！

2. フォントを適用する設定を行う

Text(
  "Hallo!World!",
  style: const TextStyle(
    fontFamily: GoogleFonts.kiwiMaru(),
  ),
),

こちらのように、テキスト毎に個別でフォントを指定することもできますが、一つ一つのテキストに同じ設定を書くのはとても大変で効率も悪いので、まとめて書くコードを紹介します。

import 'package:google_fonts/google_fonts.dart';
// その他のimport

class DemoApp extends ConsumerWidget {
  const DemoApp({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    const seedColor = Colors.cyan;
    final theme = ref.watch(themeProvider);

    return MaterialApp(
      routes: {
        // 各ページへのルート
      },
      title: 'かわいいフォントアプリ',
      theme: ThemeData(
        useMaterial3: true,
        colorSchemeSeed: seedColor,
        brightness: Brightness.light,
        textTheme: GoogleFonts.kiwiMaruTextTheme(),
      ),
      darkTheme: ThemeData(
        useMaterial3: true,
        colorSchemeSeed: seedColor,
        brightness: Brightness.dark,
        textTheme: GoogleFonts.kiwiMaruTextTheme(),
      ),
      themeMode: theme.isDarkMode ? ThemeMode.dark : ThemeMode.light,
      home: const HomeScreen(),
    );
  }
}

これで完了です！ こちらの設定をすることで、すべてのフォントを Kiwi Maru にすることができます！かわいいですね！

ぜひ、お気に入りのフォントに設定して自分なりのアプリを作ってみてください！

ちなみに、この記事のフォントには、inter というフォントを採用しています。

Inter や、Noto Sans JP は、とても読みやすく、おすすめのフォントです。

こちらの記事で解説していますので、ぜひ読んでみてください！

おわりに

最後までご覧いただきありがとうございます。

PC ロールでは、テクノロジーに関する情報をまとめて発信しています。

また、おすすめのガジェットについて幅広く紹介するガジェロールもあります。

ガジェットやソフトを使うエンジニア・クリエイターのみなさん、ぜひご覧ください。

ガジェロール | ガジェットの巻物

PC ロール | PC の巻物

← Back to home